Posiadanie pływających elementów potomnych określa szerokość nadrzędną
Oto przykład
http://jsfiddle.net/BringMeAnother/LwXhE/
// html
<div class="container clearfix">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
// css
.container {
background: red;
padding: 10px;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
Pojemnik z czerwonym tłem wydaje się zawsze rozciągać do 100%. Chciałbym, aby jego szerokość zależała od pływających dzieci, więc w tym przypadku 3 razy 100px.
Powód, dla którego chciałbym to mieć, jest następujący. W elastycznym układzie mam kontener, który zawiera kilka elementów potomnych o różnych rozmiarach. Szerokość i ilość tych dzieci może się różnić. Dzieci zawsze pływają. Celem jest skupienie pływających dzieci. Więc jeśli zawsze mam jeden element podrzędny, po prostu ustawiłbym jego margines prawy i margines lewy na auto. Istnieje jednak kilka dzieci, które chcę umieścić obok siebie, ale po uporządkowaniu w poziomie chciałbym, aby ten wiersz był wyśrodkowany na stronie. Nie mogę podać stałej szerokości kontenera, ponieważ ilość dzieci i ich szerokość nie są z góry określone.
Myślę, że mogę to zrobić za pomocą javascript, ale zastanawiam się, czy istnieje czyste rozwiązanie css. Dzięki