如何根据屏幕宽度将div拆分成列

Question

我有一种情况，我想在网页上的列中垂直显示项目。我希望列数根据可用的屏幕宽度而改变。这些项目属于组。当有足够的屏幕尺寸时，我想在自己的列中显示同一组中的那些。当屏幕尺寸太窄无法显示单独的列时，我想将这些项目组合成更少的列。在最窄的断点处，项目将位于一列中。目前，宽屏支持两列，窄屏支持一列的方案就够了。

还有一个问题：项目具有全局排序，必须保留在列中。

下面是一个片段，展示了我目前使用 float 的方法（基于 this answer。）（我在项目中包含了全局排序 (1-5) 以帮助说明。）这个方法很接近，但它有一个问题，当组项目浮动在该组中最后一个项目的下方时，组项目之间会有额外的 space。（您可能需要使用媒体查询断点来查看设备上的行为。）

.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>

在生产系统中，项目的数量、组分配和排序可能会发生变化，因此我不能依赖此处显示的特定项目或它们的排序。我会提前知道可能的组。

如果该代码段不适合您，请提供以下行为图片。第一张图片显示了组合成一个窄视口的单列的项目。请注意，项目是有序的。

第二张图片显示了分成两列的项目。请注意，第 2 项和第 5 项之间的差距不是故意的，而是我试图摆脱的。

这是新开发的内容，因此我不受任何特定 HTML 或方法的约束。为简单起见，我试图仅使用 CSS 来完成此操作，但如果一致认为 JavaScript 是必需的，那没关系。我看到了一些答案 using flex order to re-order items，但是当我不知道哪个 items/groups/orders 从系统中出来时，我不知道如何设计一个系统来支持它。

有时我想支持两列以上。理想情况下，对于最宽的屏幕，我最多有五个 groups/columns，然后，随着屏幕变窄：三列、两列和只有一列。（有规定如何组合组的业务规则。）

This answer offsetting the float doesn't work for me because the items are dynamic so I don't know in advance which floats might need offsetting. This answer about multi-col 不起作用，因为我必须将项目按组分开。我不只是尝试以柱状格式布置同质项目列表。

谢谢！

Answer 1

如果您的容器高度可以预先设置，您就有一个使用 flex 显示的解决方案。

Order 用于设置列，伪元素用作间隔。

对于超过 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>

如何根据屏幕宽度将div拆分成列

How to split divs into columns based upon screen width

html

css

multiple-columns