Наличие плавающих дочерних элементов определяет родительскую ширину
Вот пример
http://jsfiddle.net/BringMeAnother/LwXhE/
// html
// 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. Спасибо