我第一次接触column
CSS 上的规则,试图创建一个类似 Pinterest 的布局,发现它有点奇怪。我一定是做错了什么,但结果并不像预期的那样。
第一件事是:根据子元素的数量,最后一列几乎完全中断(是的......也许第一行或第二行都可以)并且每个元素都位于前一列的底部。
然后在最后一行下方创建了一个奇怪而巨大的边距。不知何故,它就像最后有另一个隐藏的行(尽管没有)。
最后,似乎列首先被填充或类似的东西。第 3 个元素位于第 3 行,第 8 个元素位于顶部。
根据列表中元素的数量,列的宽度可以填充(列填充 100% 的宽度)。
哦,如果我删除column-gap
规则,页面底部的空间会增加!
有没有一种好方法可以让它始终填充宽度 100%(定义为 N 行column-count
),并且单元格首先从左到右插入,然后才从上到下?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 项)