3
我有一个2列仅用于CSS的网格,但它会在两列之下产生多余的空间。CSS列布局下的额外空间
。
如果我从每个单元格中删除内联块,多余的空间并不那么糟糕,但这是防止网格环绕所需的。我推测这个问题是与垂直对齐,增加这似乎没有什么区别。有什么办法来防止这种多余的空间?
.columns {
-webkit-column-gap: 1.5em;
-moz-column-gap: 1.5em;
column-gap: 1.5em;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
}
.columns__cell {
break-inside: avoid-column;
column-break-inside: avoid;
display: inline-block;
vertical-align: top;
width: 100%;
}
.columns--2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
结构:
<div class="column column--2">
<!-- repeated -->
<div class="widget__item poll column__cell">
<div class="widget__head clearfix">
***
</div>
<div class="widget__body">
***
</div>
</div>
<!-- repeated -->
</div>
向我们展示一些标记,在jsfiddle中更好 – 2014-09-24 12:36:24
难道你看不到@LorenzoMarcon列下的额外空间吗?看看所有的空白。对于OP,只需稍微调整浏览器的大小,空间就会消失:-) – Joe 2014-09-24 12:37:09
当然我可以看到它,但有些标记可以更容易地帮助并进行一些测试 – 2014-09-24 12:39:10