填充一行的css多列

Question

我有一个效果很好的多列布局。布局以平铺格式发布，比方说图片。但是，我希望它根据时间发布。我可以在查询中根据上次修改时间提取数据。但是，该列表按 column1 然后是 column2 依此类推。

A1 | B1 | C1 | D1

A2 | B2 | C2 | D2

A3 | B3 | C3 | D3

但我希望它看起来像

A1 | A2 | A3 | B1

B2 | B3 | C1 | C2

C3 | D1 | D2 | D3 

等等。如何在多列上获得此行效果？如果我不使用多列我可以获得这种效果，但它在较小的屏幕上没有响应。有没有更简单的方法让多列的行为像我想要的那样，或者我必须处理然后为每个设备大小分开？

Answer 1

是的，您可以使用 CSS float: left 布局而不是列来轻松实现这一点。下面是它的外观示例:

.flex-c {
    display: block;
    height: 450px;
    width: auto;
}

.flex-i {
    height: 100px;
    width: 100px;
    float:left;
    background: gray;
    margin: 0 10px 10px 0;
}

    <div class="flex-c">
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
    </div>

此方法适用于所有现代浏览器，并且完全适合移动设备。