Наличие плавающих дочерних элементов определяет родительскую ширину
Вот пример
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;
}
Контейнер с красным фоном, кажется, всегда растягивается до 100%. Я хотел бы, чтобы его ширина зависела от плавающих дочерних элементов, поэтому в этом случае 3 раза по 100 пикселей.
Причина, по которой я хотел бы иметь это, заключается в следующем. В гибком макете у меня есть контейнер, который содержит несколько дочерних элементов разных размеров. Ширина и количество этих детей могут варьироваться. Дети всегда плавают. Цель состоит в том, чтобы центрировать плавающих детей. Итак, если бы у меня всегда был один дочерний элемент, я бы просто установил его margin-right и margin-left на auto. Однако есть несколько детей, которых я хочу поставить рядом друг с другом, но после того, как они были упорядочены по горизонтали, я бы хотел, чтобы этот ряд был в центре страницы. Я не могу задать фиксированную ширину контейнера, поскольку количество дочерних элементов и их ширина заранее не определены.
Я думаю, что я мог бы сделать это с помощью JavaScript, но мне интересно, есть ли чистое решение CSS. Спасибо