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.

do góry

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.

do góry