html - 为什么 CSS float 不遵循 CSS3 列？

Question

我在 CSS3 列布局中有一些 float:left div。 div 并不总是遵守列宽属性。参见示例: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 上的结果截图(在一定宽度下):

列宽应该是红色“一”方 block 的宽度，但“二”、“三”、“四”最终并排，我认为它们应该在下方。

有没有人有任何 CSS 魔术的想法，可以使这些框遵守列宽？

Answer 1

我猜这是由于列尚未最终确定或完全实现所致。

这里有一个可以解决这个问题的修复程序......

在 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;
}

说明 - 额外的包装器会强制执行您需要的宽度限制，但它本身仍应遵守列流规则。