Наличие плавающих дочерних элементов определяет родительскую ширину

Вот пример

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. Спасибо

Ответы на вопрос(4)

Ваш ответ на вопрос