0

我第一次接触columnCSS 上的规则，试图创建一个类似 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 项）

右栏消失了！

4

1 回答 1

0

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

我可以使用#multicolumn检查此链接

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

于 2015-02-27T08:04:59.993 回答