为什么CSS不支持CSS3列？

Question

我有一些浮动：在CSS3列布局中留下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上的结果的屏幕截图（某个宽度）：

列宽应该是红色'One'方块的宽度，但是'Two'，'Three'，'Four'会在旁边，我认为它们应该位于下方。< / p>

有没有人有任何关于CSS魔术的想法会使这些盒子符合列宽？

Answer 1

Column-width属性不定义元素的宽度，而是定义其中每列文本的宽度。

有关详情：http://www.w3schools.com/cssref/css3_pr_column-width.asp

“经典”宽度足以让你。

.container {
    width: 240px;        
}

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

Answer 2

我猜这是由于专栏尚未最终确定或尚未完全实施。

这是一个可以解决问题的修复方法......

在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 3

column-width属性未定义每列的确切宽度。它定义了列的最小宽度。基于此值，浏览器决定要创建的列数，然后在它们之间均匀分布容器的可用宽度。因此，例如，如果容器宽度为900px，column-width:240px将意味着浏览器生成3列（最大数量为240px的列适合900px），并且它们的实际宽度将为300px（假设{{1 }}）。