问填充一行的css多列
EN

Stack Overflow用户

提问于 2014-11-16 09:14:32

回答 1查看 62关注 0票数 0

我有一个多列布局，工作得很好。布局以平铺格式发布，比如说图片。但是，我希望它是基于时间发布的。我可以在我的查询中做到这一点，以基于上次修改时间提取数据。但是，列表是先按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

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

css

multiple-columns

回答 1

Stack Overflow用户

发布于 2014-11-17 11:25:20

是的，你可以很容易地使用一个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>

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26952719

复制

相似问题

问填充一行的css多列
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问填充一行的css多列EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问填充一行的css多列
EN