CSS 列布局下方的额外空间答案

【问题标题】：Extra space beneath CSS column layoutCSS 列布局下方的额外空间
【发布时间】：2014-11-18 22:57:19
【问题描述】：

我有一个 2 列的纯 CSS 网格，它可以工作，但是它会导致两列下方有多余的空间。

如果我从每个单元格中删除 inline-block 多余的空间并不是那么糟糕，但是这是防止网格环绕所必需的。我认为问题出在垂直对齐上，但添加这似乎没有任何区别。有什么办法可以防止这种多余的空间？

.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 中更好
你看不到@LorenzoMarcon 列下的额外空间吗？看看所有的空白。对于 OP，只需稍微调整浏览器的大小，空间就会消失 :-)
我当然可以看到它，但是使用一些标记会更容易帮助并进行一些测试
@Joe 调整浏览器大小没有区别
啊，愚蠢并不能很好地转化为文本。我总是忘记

标签： css css-multicolumn-layout

【解决方案1】：

我会使用 float 属性。 .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%;
}

【讨论】：