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

Question

Вот пример

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. Благодаря

Answer 1

Добавить position:fixed; в контейнер

.container { 
    background: red; 
    padding: 10px; 
    position:fixed; 

Fiddle

Answer 2

По оборачивать ваш контейнер DIV в других обертке DIV, вы можете центрирование красного контейнера DIV, а красный DIV будет только как и его плавающие дети.

HTML

<div class="centered"> 
    <div class="container"> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
    </div> 
</div> 

CSS

.centered { 
    text-align: center; 
} 
.container { 
    background: red; 
    padding: 10px; 
    display: inline-block; 
} 
.child { 
    width: 100px; 
    height: 100px; 
    float: left; 
} 
.child:nth-child(even) { 
    background: green; 
} 
.child:nth-child(odd) { 
    background: blue; 
} 

Fiddle: http://jsfiddle.net/SbPRg/

Answer 3

Кроме Adsy предложение (установить положение контейнера к фиксировано), вы можете:

1) Использовать абсолютную позицию на контейнере:

HTML:

<div class="container"> 
<div class="child"></div> 
<div class="child"></div> 
<div class="child"></div> 
</div> 

CSS:

.container { 
    background: red; 
    padding: 10px; 
    position:absolute; 
} 
.child { 
    width: 100px; 
    height: 100px; 
    float: left; 
} 
.child:nth-child(even) { 
    background: green; 
} 
.child:nth-child(odd) { 
    background: blue; 
} 

http://jsfiddle.net/tKz8b/

2) Установите поплавок на контейнер, который хорош, если вам это нужно с относительным/статическим позиционированием :

HTML:

<div class="container"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 
<div class="clearfix"></div> 
<div>Next</div> 

CSS:

.container { 
    background: red; 
    padding: 10px; 
    float: left; 
} 
.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; 
} 

http://jsfiddle.net/LYrWx/1/

Answer 4

Поздно партии здесь, но все, что вам действительно нужно, это добавить display: inline-block. И чтобы центрировать .container div, просто примените text-align: center к тому, что содержит it.

JSFiddle: http://jsfiddle.net/LwXhE/24/