我有一种情况,我想在网页上的列中垂直显示元素。我希望根据可用的屏幕宽度更改列数。这些元素属于组。当屏幕尺寸足够时,我想在自己的列中显示同一组中的内容。当屏幕尺寸太窄而无法显示单独的列时,我想将元素组合成更少的列。在最窄的断点处,元素将位于一列中。目前,支持两列宽屏幕和一列窄屏幕的解决方案就足够了。
还有另一个问题:元素具有全局排序,必须保留在列中。
下面是一个片段,显示了我当前使用 float
的方法(基于 this answer 。)(我已在元素中包含全局排序 (1-5) 以帮助说明。)此方法很接近,但它有一个问题,即当组元素 float 在该组中最后一个元素下方时,组元素之间存在额外的空间。 (您可能需要使用媒体查询断点来查看设备上的行为。)
.items {
overflow: auto;
}
.item {
width: 50%;
}
.item.group-a {
float: left;
clear: left;
background-color: #FAF;
}
.item.group-b {
float: right;
clear: right;
background-color: #AAF;
}
@media only screen and (max-width: 400px) {
.item.group-a, .item.group-b {
float: none;
width: 100%;
}
}
<div class="items">
<div class="item group-a">
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus ipsum quis nibh pretium commodo.
</div>
<div class="item group-b">
2. Quisque dolor ex, maximus non orci vel, luctus rhoncus lectus. Aliquam vulputate lacus et ipsum placerat commodo.
</div>
<div class="item group-a">
3. Cras gravida rhoncus elit, eu porttitor ipsum tempor at. Sed blandit pulvinar purus, eget pellentesque arcu rhoncus in.
</div>
<div class="item group-a">
4. Morbi accumsan, lectus a hendrerit congue, sapien dolor accumsan purus, eu iaculis nulla turpis ut sapien.
</div>
<div class="item group-b">
5. Aliquam elementum sapien ut dignissim lacinia. Etiam in nulla feugiat, porta massa at, tempor nulla. Suspendisse ullamcorper at ligula ut auctor.
</div>
</div>
在生产系统中,元素数量、组分配和排序可能会发生变化,因此我不能依赖此处显示的特定元素或其排序。我会提前知道可能的组。
以下是该行为的图像,以防该代码段不适合您。第一张图片显示了在狭窄视口(viewport)中组合成单列的元素。请注意,这些元素是按顺序排列的。
第二张图片显示了分为两列的元素。请注意,第 2 项和第 5 项之间的差距不是故意的,而是我试图消除的。
这是新开发的内容,因此我不受任何特定 HTML 或方法的束缚。为了简单起见,我试图仅使用 CSS 来完成此任务,但如果一致认为 JavaScript 是必要的,那也没关系。我看到了一些答案using flex order to re-order items ,但当我不知道系统中有哪些商品/组/订单时,我不知道如何设计一个系统来支持这一点。
在某些时候我想支持两个以上的专栏。理想情况下,对于最宽的屏幕,我最多有五个组/列,然后,随着屏幕变窄:三列、两列和一列。 (有一些业务规则规定了如何组合组。)
This answer offsetting the float对我不起作用,因为这些元素是动态的,所以我事先不知道哪些 float 可能需要抵消。 This answer about multi-col不起作用,因为我必须按组将元素分开。我不仅仅是试图以柱状格式布局同质的元素列表。
谢谢!
最佳答案
如果您的容器高度可以预先设置,那么您就有了使用柔性显示的解决方案。
顺序用于根据需要设置列,伪元素用作间隔符。
对于超过 3 列的解决方案,由于只有 2 个伪值可用,因此您需要额外的元素来充当分隔符
.items {
overflow: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 90vh;
}
.item {
width: 50%;
}
.item.group-a {
background-color: #FAF;
order: 10;
}
.item.group-b {
background-color: #AAF;
order: 20;
}
.items:before {
content: "";
order: 15;
height: 100vh;
}
@media only screen and (max-width: 400px) {
.item.group-a, .item.group-b {
width: 100%;
}
.item.group-a {
order: 10;
}
.item.group-b {
order: 10;
}
}
<div class="items">
<div class="item group-a">
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus ipsum quis nibh pretium commodo.
</div>
<div class="item group-b">
2. Quisque dolor ex, maximus non orci vel, luctus rhoncus lectus. Aliquam vulputate lacus et ipsum placerat commodo.
</div>
<div class="item group-a">
3. Cras gravida rhoncus elit, eu porttitor ipsum tempor at. Sed blandit pulvinar purus, eget pellentesque arcu rhoncus in.
</div>
<div class="item group-a">
4. Morbi accumsan, lectus a hendrerit congue, sapien dolor accumsan purus, eu iaculis nulla turpis ut sapien.
</div>
<div class="item group-b">
5. Aliquam elementum sapien ut dignissim lacinia. Etiam in nulla feugiat, porta massa at, tempor nulla. Suspendisse ullamcorper at ligula ut auctor.
</div>
</div>
关于html - 如何根据屏幕宽度将 div 分成列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42876395/