CSS列布局下方额外空间

Question

我有一个两列的CSS网格，它能够工作，但会在两列下方产生过多的空隙。 如果我从每个单元格中删除inline-block，那么多余的空间就不会那么严重，但这是防止网格换行所必需的。我认为问题出在vertical-align上，但是添加该属性似乎没有任何影响。有没有什么办法可以防止这种多余的空间呢？

.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>

- jshjohnson

---

展示一些标记，最好在JSFiddle上。 - Lorenzo Marcon

@LorenzoMarcon，你没看到列下面的额外空间吗？看看所有的空白。对于问题提出者，只需将浏览器调整大一点，这个空间就会消失 :-) - Joe

当然我能看到，但加上一些标记会更容易帮助和进行一些测试。 - Lorenzo Marcon

@Joe :) 我喜欢英式幽默，但你说得对。有时候我在文字上就是不懂。 - Lorenzo Marcon

你添加的代码不足以复制问题。请尝试在jsfiddle.net上创建一个示例，展示实际的问题。 - Stephan Muller

Answer 1

我会使用浮动属性。 .inner是您嵌套colLeft和colRight的容器。这应该可以解决您的问题。

.inner {
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    margin: 0 auto;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.colRight {
    float: left;
    width: 50%;
}
.colLeft {
    padding-right: 10%;
    float: right;
    width: 50%;
}

- Brandon Mowat