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

时间:2017-03-18 15:45:36

标签: html css multiple-columns

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

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

以下是使用float显示我当前方法的片段(基于this answer。)(我已在项目中包含全局排序(1-5)以帮助说明。)此方法是关闭,但它有一个问题,当组项目浮动到该组中的最后一项之下时,组项目之间有额外的空间。 (您可能需要使用媒体查询断点来查看设备上的行为。)

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

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

以下是代码段不适合您的行为图片。第一张图像显示组合为窄视口的单个列的项目。请注意,这些项目是有序的。

Single column at narrow viewport

第二张图片显示分为两列的项目。请注意,第2项和第5项之间的差距不是故意的,而是我想要摆脱的。

Two columns at wider viewport

这是新的开发,因此我不依赖于任何特定的HTML或方法。为了简单起见,我试图仅使用CSS来实现这一点,但如果一致认为JavaScript是必要的,那就没关系。我看到了一些答案using flex order to re-order items,但是当我不知道哪些项目/组/订单从系统中出来时,我没有看到我如何设计一个系统来支持它。

在某些时候,我想支持两个以上的专栏。理想情况下,对于最宽的屏幕,我最多有五个组/列,然后,随着屏幕变得更窄:三个,两个,只有一列。 (有业务规则决定如何组合组。)

This answer offsetting the float对我不起作用,因为这些项目是动态的,所以我事先并不知道哪些花车可能需要抵消。 This answer about multi-col不起作用,因为我必须按组分开项目。我不只是尝试以列式格式布置同类项目列表。

谢谢!

1 个答案:

答案 0 :(得分:2)

如果您的容器高度可以预先设置,您可以使用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>