我第一次接触CSS上的column规则，试图创建类似Pinterest的布局，但发现它有点怪异。我一定在做错事，但结果与预期不符。
第一件事是：根据子元素的数量，最后一列几乎全部中断（是的……也许第一行或第二行都可以），并且每个元素都移至上一列的底部。
然后，在最后一行下方创建了一个奇怪且巨大的边距。不知何故，好像末尾有另一个隐藏行（尽管没有）。
最后，似乎首先填充了列或类似的东西。第3个元素进入第3行，第8个元素位于顶部。
根据列表中元素的数量，列的宽度可以正确填充（列填充宽度的100％）。
哦，如果我删除了column-gap规则，页面底部的空间会增加！
有没有办法使它始终填充宽度100％（在column-count中定义了N行），并且要首先从左到右然后从上到下填充单元格？
的CSS
#posts{
width: 100%;
overflow: hidden;
-webkit-column-count: 4;
-webkit-column-gap: 1.875em; /* 30px */
-webkit-column-fill: auto;
-moz-column-count: 4;
column-gap: 1.875em;
-moz-column-gap: 1.875em; /* 30px */
-moz-column-fill: auto;
column-count: 4;
column-fill: auto;
}
.post{
display: inline-block;
margin-bottom: 1.875em;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
的HTML
<section id='posts' class='clearfix'>
<div class='post'>
<div class='top' style='background-image: url("http://lorempixel.com/400/300/sports/1")'></div>
<div class='bottom'>
<span class='title'>Lorem ipsum sit ament lorem lorem ipsum</span>
<span class='date'>em 15/08/2014</span>
</div>
<span class='category'>Lorem ipsum</span>
</div>
....
</section>
错误示例（有很多，此错误与
columns-count: 4一起出现，并且列表中有6个项目） 最佳答案
multiple-columns尚未完全支持。而且Chrome中存在错误。我认为没有办法解决（据我所知）。您可能需要等待浏览器修复它。
Can I Use #multicolumn检查此链接
据报道，Chrome浏览器的容器高度计算不正确，并且经常在边距，填充边上中断，并且可能在上一列的底部显示下一列的1px。
关于html - CSS3列未按预期填充宽度，并且元素位置困惑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28756850/