列按顺序填充css

Question

我的CSS：

    #columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 10px;
    column-fill: auto;
}

我的列数是3，但填充发生如图所示我如何一次显示3张图像。

以下是我的jsfiddle

https://jsfiddle.net/swh36mLm/

抱歉，它包含我完整的css文件。

Answer 1

如果您想为内容卡设置3列column-count，则不是正确的选择。您可以column-count使用divide a long text into multiple columns。在您的示例中，您尝试将卡分为多个coulmns。如果你为包装div设置了一个高度，我猜你可能没有收到预期的结果：

<div id="columns" style="height:350px;">...</div>

如果您想要多列布局，请check out this question。

Answer 2

您可以使用CSS flexbox吗？如果您将{{1}}更改为灵活容器，则将直接子节点设置为宽度为33％（更少，实际上是为了适应间隙​​，边框等 - 您可以找出合适的数字） ，最后你可以连续添加一个三栏布局。

由于你的CSS长度接近25,000行，所以我改变了这一点：

• 从23,142到23,156
行删除了@media规则
• 将{{1}}规则重写为flexbox（请参阅下面的代码）
• 添加了{{1}}规则，将子div的宽度设置为30％（同样，30％是您必须使用的，以获得最大的“三分之一”列，您可以获得）

{{1}}

我使用这些更改编辑了您的JSFiddle并得到了如下结果：

tinyalsa repository

我希望它有所帮助。如果您想了解有关CSS Flexboxes的更多信息，请查看此URL（过去对我有很多帮助）：

Answer 3

“列数”不会分割你想要的点数，

例如在此代码中

<div class="c">...</div>
<div class="c">...</div>
<div class="c">...</div>

不要将每个“c”类的div视为单个项目。

“列数”除以想要的点，

例如

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard

在本文中使三个部分相等，并将它们显示在三列中。

解决方案你得到的每件物品

width: 33.33333333%;

并漂浮它们。

如果您想要完整的代码，请为我发表评论。