两列布局，无需使用JavaScript即可对项目进行重新排序 [英] Two-column layout with ability to reorder items without JavaScript

问题描述

是否可以通过媒体查询将2列布局转换为1列布局?

Is there a way to get 2 column layout that is transformed to a 1 column layout with a media query?

2列布局的条件:

1. 项目应在列中一个接一个地流动
2. 列中的项目将具有不同的高度
3. 项目位置(顺序)可以由html标记元素位置确定

1列布局的条件:

1. 物品应该一个接一个地流动
2. 列中的项目将具有不同的高度
3. 项目位置(！)不能由html标记强加(应为 通过CSS控制)

1. items should flow one after another
2. items within columns will have different heights
3. item position (!) cannot be imposed by html markup (should be controlled over css)

我一直在考虑为列使用两个单独的容器-但这构造使我无法在布局变为1列时对列之间的元素进行重新排序(混合).我似乎应该将所有元素都放在一个容器中-那么对于1列布局，flex可以用于重新排序，但是在那种情况下如何实现2列布局?

I have been considering two separate containers for columns - but that construct blocks me for reordering (mix) elements between columns when layout becomes 1 column. I seems that all elements should be placed within one container - then for 1 column layout flex can be used for reordering, but how to achieve 2 column layout in that case?

要模拟媒体查询行为，请从主容器中删除类一栏".

To simulate media query behaviour remove class "one-column" from main container.

<div id="container" class="one-column"> -> <div id="container" class="">

在这个概念中，主要的问题是列(2列布局)中的项目不是一个接一个地直接流动(右列之间存在间隙).

In this concept the main problem is that items within columns (2 column layout) are not flowing directly one after another (there are gaps between items in the right column).

这是我到目前为止所取得的成就:

Here's what I achieved so far:

* {
  box-sizing: border-box;
}
div {
  width: 100%;
  height: 100px;
  float: left;
}
#container.one-column {
  display: flex;
  flex-direction: column;
  height: auto;
}
#container {
  display: block;
}
.col1 {
  width: 60%;
  background-color: red;
  height:300px;
  float: left;
}
.col2 {
  width: 40%;
  background-color: blue;
  border: 1px solid white;
  float: right;
}
.one-column > div {
  width: 100%;
}

<div id="container" class="one-column">
  <div class="col1" style="order:2;">
    ONE
  </div>
  <div class="col2" style="order:1;">
    TWO
  </div>
  <div class="col1" style="order:4;">
    THREE
  </div>  
  <div class="col2" style="order:3;">
    FOUR
  </div>
</div>

JSFiddle: https://jsfiddle.net/3b6htt1d/40/

JSFiddle: https://jsfiddle.net/3b6htt1d/40/

推荐答案

2列布局的条件:

Conditions for 2 column layout:

1. 项目应在列中一个接一个地流动
2. 列中的项目将具有不同的高度
3. 项目位置(顺序)可以由html标记元素位置确定

1. items should flow one after another within columns
2. items within columns will have different heights
3. item position (order) can be imposed by html markup element position

这正是CSS列所要做的.

That is exactly what CSS Columns does.

1列布局的条件:

Conditions for 1 column layout:

1. 物品应该一个接一个地流动
2. 列中的项目将具有不同的高度
3. 项目位置(！)不能由html标记强加(应通过CSS控制)

1. items should flow one after another
2. items within columns will have different heights
3. item position (!) cannot be imposed by html markup (should be controlled over css)

这正是Flexbox和column方向所能做的.

That is exactly what one can do with Flexbox and column direction.

因此，如果将两者结合起来，则对于两列，它们将如左图所示从上到下流动，对于一列，您可以使用order控制它们的位置.

So if one combine the two, for 2 columns they will, as shown in the left image sample, flow from top to bottom, and for 1 columns, you can control their position with order.

这样您就可以避免固定高度，并获得动态/灵活尺寸的物品.

With this you avoid fixed heights and get dynamic/flexible sized items.

更新了小提琴

堆栈片段

* {
  box-sizing: border-box;
}
div {
  width: 100%;
  height: 100px;
}
#container.one-column {
  display: flex;
  flex-direction: column;
  height: auto;
}
.col1 {
  width: 60%;
  background-color: red;
  height:300px;
}
.col2 {
  width: 40%;
  background-color: blue;
  border: 1px solid white;
}
.one-column > div {
  width: 100%;
}

@media (min-width: 500px) {
  #container.one-column {
    display: block;
    columns: 2;
  }
  #container.one-column > div {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .zcol1 ~ .col1 {
    background-color: yellow;
    height:100px;
  }
}

<div id="container" class="one-column">
  <div class="col1" style="order:2;">
    ONE
  </div>
  <div class="col2" style="order:1;">
    TWO
  </div>
  <div class="col1" style="order:4;">
    THREE
  </div>  
  <div class="col2" style="order:3;">
    FOUR
  </div>
</div>

这是我的另一个答案，可能是将Flexbox与float结合使用的另一种选择.

Here is another answer of mine, that might be another option, combining Flexbox with float.

• 根据评论进行了更新

  这是一个结合了Flexbox和float的版本，可以生成您的屏幕截图显示的布局:

  Here is a version combining Flexbox and float, which produce the layout your screen shot shows:

  • 更新了演示

  这篇关于两列布局，无需使用JavaScript即可对项目进行重新排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！