Почему CSS не плавает, уважая столбцы CSS3?

Question

У меня есть float: left divs внутри раскладки столбцов CSS3. Дивы не всегда учитывают свойство ширины столбца. Смотрите пример: http://jsfiddle.net/upzkeLxc/

HTML:

<div class='container'> 
    <div class='content w1 h1 c1'><span>One</span></div> 
    <div class='content w3 h3 c2'><span>Two</span></div> 
    <div class='content w3 h3 c3'><span>Three</span></div> 
    <div class='content w3 h3 c4'><span>Four</span></div> 
    <div class='content w1 h3 c5'><span>Five</span></div> 
    <div class='content w2 h2 c6'><span>Six</span></div> 
    <div class='content w2 h2 c7'><span>Seven</span></div> 
    <div class='content w2 h2 c8'><span>Eight</span></div> 
</div> 

CSS:

.c1 { background-color: red; } 
.c2 { background-color: green; } 
.c3 { background-color: blue; } 
.c4 { background-color: yellow; } 
.c5 { background-color: magenta; } 
.c6 { background-color: cyan; } 
.c7 { background-color: wheat; } 
.c8 { background-color: rose; } 

.w1 { width: 240px; } 
.w2 { width: 120px; } 
.w3 { width: 80px; } 

.h1 { height: 240px; } 
.h2 { height: 120px; } 
.h3 { height: 80px; } 

.container, .content { 
    padding:0; margin:0; 
} 

.container { 
    -webkit-column-width: 240px; 
    -moz-column-width: 240px; 
    column-width: 240px; 
    -webkit-column-gap: 0; 
    -moz-column-gap: 0; 
    column-gap: 0; 

} 

.content { 
    float: left; 
    display: flex; 
    align-content:center; 
    align-items: center; 
    -webkit-column-break-inside: avoid; 
    -moz-column-break-inside: avoid; 
    column-break-inside: avoid; 
} 

Вот скриншот результатов на Google Chrome (при определенной ширине):

Ширина столбца должен быть шириной красного квадрата «Один», но «Два», «Три», «Четыре» находятся рядом, где я думал, что они должны быть внизу.

Есть ли у кого-нибудь идеи CSS-магии, которые сделают эти поля уважением ширины столбцов?

Answer 1

Я guesing это из-за колонн не завершенных или еще полностью реализованы.

Вот исправление, будет обойти вопрос ...

Добавить дополнительную оболочку в HTML:

<div class='container'> 
    <div class='content-wrapper'> 
     <div class='content w1 h1 c1'><span>One</span></div> 
     <div class='content w3 h3 c2'><span>Two</span></div> 
     <div class='content w3 h3 c3'><span>Three</span></div> 
     <div class='content w3 h3 c4'><span>Four</span></div> 
     <div class='content w1 h3 c5'><span>Five</span></div> 
     <div class='content w2 h2 c6'><span>Six</span></div> 
     <div class='content w2 h2 c7'><span>Seven</span></div> 
     <div class='content w2 h2 c8'><span>Eight</span></div> 
    </div> 
</div> 

Установите ширину этой обертки к ширине вашей колонки:

.content-wrapper { 
    width: 240px; 
} 

Пояснение - дополнительная оболочка обеспечивает ограничение ширины, которое вам нужно, но оно должно по-прежнему подчиняться правилам потока столбцов.

Answer 2

Свойство Column-width не определяет ширину элемента, а ширину каждого столбца текста внутри него.

Для получения более подробной информации: http://www.w3schools.com/cssref/css3_pr_column-width.asp

«Классический» ширина достаточно для вас.

.container { 
    width: 240px;   
} 

jsFiddle: http://jsfiddle.net/upzkeLxc/2/

Answer 3

Свойство column-width не определяет точную ширину каждого столбца. Он определяет минимальную ширину столбца. Основываясь на этом значении, браузер решает количество создаваемых столбцов, а затем равномерно распределяет доступную ширину контейнера между ними. Так, например, если ширина контейнера равна 900px, то column-width:240px будет означать, что браузер делает 3 столбца (максимальное число 240 пикселей шириной столбцов, которые вписываются в 900 пикселей), и их фактическая ширина будет 300 пикселей (при условии, что column-gap:0).