Question

我有一个非常好的多列布局。布局以平铺格式发布，比如图片。但是，我希望它能够根据时间发布。我可以在我的查询中执行此操作，以根据上次修改时间提取数据。但是，列表按列1排序，然后按列2排序，依此类推。

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>

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

css多列填充连续

1 个答案: