我正在尝试创建一个响应式 HTML 布局，它将显示一组有序数据。
在较小的屏幕尺寸上，它将按顺序显示一栏内容。但是，在更大的屏幕尺寸上，它会显示两列，元素在两列之间交替。
例如:小
| 1 |
| 2 |
| 3 |
| 4 |
例如。大
| 1 | 2 |
| 3 | 4 |
除此之外，在两列布局中，左列中的元素应为float: right，而右列中的元素应为float: left，以便无论元素的宽度如何，它们都会在中心相遇。
到目前为止，我想到的唯一想法是创建两个列容器，一个将所有元素向右浮动，一个将所有元素向左浮动。但是，我还没有弄清楚如何在 order 数组中分配元素，这样我就不必将它分成两部分，因为这意味着当将屏幕尺寸更改为较小的屏幕时，一列元素将不再有序。
编辑1:每个元素的高度可能不一样，放置元素时，应该放在总高度较小的高度上。
| ------|----------|
| | 1 | 2 |
| | |----------|
| | | 3 | |
| ------|------- |
这是一个样本 jsfiddle大约我正在尝试做的事情，除了可能不那么hacky。我试图实现的布局类似于 this , 除了元素有特定的顺序。
最佳答案
所以经过一些测试，我和一个 friend 认为这可能是最好的方法，即在左侧元素上使用 display: flex 而在右侧元素上使用 float: right jsfiddle 中显示的正确元素.
关于css - 将有序的元素数组拆分为 HTML 中的交替列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37824619/