[CSS] Autorozmieszczanie div'ów

[Czarny_Zielony_Ziemniak]

Jak uzyska� efekt aby div'y rozmie�ci�y si� automatycznie w linii i
automatycznie dopasowa�y odst�py mi�dzy sob�:

Przyk�ad:

1 div - wyr�wnany do lewej,
ostatni - wyr�wnany do prawej a te pomi�dzy nimi (niezale�nie od ilo�ci),
�eby same dopasowa�y sobie R�WNE odst�py pomi�dzy sob�.
Wielko�� ka�dego diva to 200px na 200px
Wszystko ma byďż˝ wycentrowane

Czy da siďż˝ to ustawiďż˝ automatycznie czy trzeba to robiďż˝ na piechotďż˝ ....

M�j kod:

CSS

#box_1 {
float: left;
width: 200;
height: 200px;
background: white;
border:1px solid #DDD;
margin-right: 50px;
margin-bottom: 50px;
text-align: center;
}

#box_2 {
width: auto;
height: 200px;
background: white;
border:1px solid #DDD;
margin-bottom: 50px;
text-align: center;
}

HTML

<div id="body">
<div id="box_1">div1</div>
<div id="box_1">div2</div>
<div id="box_1">div3</div>
<div id="box_1">div4</div>
<div id="box_1">div5</div>
<div id="box_2">div6</div>
</div>

B�d� wdzi�czny za podpowiedzi ewentualnie poprawk� mojego kodu.

[Paweł Piskorz]

Czarny_Zielony_Ziemniak wrote:
> Jak uzyskać efekt aby div'y rozmieściły się automatycznie w linii i
> automatycznie dopasowały odstępy między sobą:

<div id="rodzic">
<div>Twój div</div>
<div>Twój div</div>
<div>Twój div</div>
...
</div>

#rodzic {
text-align:justify;
text-align-last:justify;
}

#rodzic > div {
display:inline-block;
width:200px;
}

Niestety poleci tylko w IE8. Jeżeli nie chce Ci się czekać aż
Gecko/Opera/WebKit dorobią się obsługi text-align-last, to trzeba będzie
dołożyć po divie:
<div id="rodzic">
<div class="boxWrapper">
<div class="box">Twój div</div>
</div>
<div class="boxWrapper">
<div class="box">Twój div</div>
</div>
<div class="boxWrapper">
<div class="box">Twój div</div>
</div>
...
</div>

#rodzic {
display:table;
width:100%;
}

#rodzic div.boxWrapper {
display:table-cell;
}

#rodzic div.box {
width:200px;
margin:0 auto;
}

Na IE6 i 7 nie masz co liczyć.

> Przykład:

>
> HTML
>
> <div id="body">
> <div id="box_1">div1</div>
> <div id="box_1">div2</div>

id ma być unikalne i w całym dokumencie może wystąpić tylko raz. Użyj klas.