CSS3 列未按预期填充宽度，元素位置混乱答案

【问题标题】：CSS3 column not filling width as expected and elements are positioned confusedlyCSS3 列未按预期填充宽度，元素位置混乱
【发布时间】：2021-02-18 09:34:48
【问题描述】：

我第一次接触到 CSS 上的 column 规则，试图创建一个 Pinterest-like 布局，发现它有点奇怪。我一定是做错了什么，但结果并不像预期的那样。

第一件事是：根据子元素的数量，最后一列几乎完全中断（是的......也许第一行或第二行都可以）并且每个元素都位于前一列的底部。

然后在最后一行下方创建一个奇怪而巨大的边距。不知何故，这就像最后还有另一个隐藏的行（虽然没有）。

最后，似乎列首先被填充或类似的东西。第 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项）

【问题讨论】：

标签： html css css-multicolumn-layout

【解决方案1】：

multiple-columns还没有完全支持。并且 Chrome 中存在错误。我认为没有办法解决它（据我所知）。您可能需要等到浏览器修复它。

Can I Use #multicolumn查看此链接

Chrome 被报告错误计算容器高度，并且经常在边距、内边距中断，并且可以在上一列的底部显示下一列的 1px。

【讨论】：