aliniere 5 div-uri ca un X

Coduri intrebari, probleme legate de HTML, XHTML si CSS
andras
Mesaje: 430

aliniere 5 div-uri ca un X

Salut,
Iar am probleme cu aliniere div-uri: am 5 div-uri toate egale ca dimensiuni si toate acelasi format, unul sa fie centrat in mijlocul paginii iar celelalte 4 sa fie in colturile div-ului centrat si ancorate "colt la colt" fiecare spre exterior, sa formeze un fel de X. O idee? Multumesc.

MarPlo Mesaje: 4343
Salut
Cel mai simplu ca sa obtii aranjare de forma X cu cinci Div-uri e sa le adaugi intr-un tabel cu 3 randuri si 3 coloane. iar div-urile se adauga in celula din mijloc si in colturi.

Cod: Selectaţi tot

<style>
#tbl1 {
border:0;
margin:1em auto;
text-align:center;
}
#tbl1 td {
height:120px;
width:150px;
}
.dvsx {
background:#f8f9fe;
border:1px solid #33f;
font-size:18px;
height:100%;
margin:0;
padding:0;
width:100%;
}
</style>

<table id="tbl1" cellpadding="0" cellspacing="0">
<tr><td><div class="dvsx">Div 1</div></td><td></td><td><div class="dvsx">Div 2</div></td></tr>
</tr><td></td><td><div class="dvsx">Div 3</div></td><td></td></tr>
<tr><td><div class="dvsx">Div 4</div></td><td></td><td><div class="dvsx">Div 5</div></td></tr>
</table> <table id="tbl1" cellpadding="0" cellspacing="0">
<tr><td><div class="dvsx">Div 1</div></td><td></td><td><div class="dvsx">Div 2</div></td></tr>
</tr><td></td><td><div class="dvsx">Div 3</div></td><td></td></tr>
<tr><td><div class="dvsx">Div 4</div></td><td></td><td><div class="dvsx">Div 5</div></td></tr>
</table>
Demo:
Div 1
Div 2
Div 3
Div 4
Div 5

andras Mesaje: 430
E foarte fain si idee simpla. Multumesc!