Javascript 如何在不阻塞水平行的情况下创建两列

我有一个Wordpress的帖子循环。这将输出某种post列表。为了方便起见，我们可以认为它是一个<代码>有序列表 >：

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ol>

一,
二,
三,
四,
五,

每个列表项都有一个唯一的、不同的高度。当给定某个设备宽度时，我希望它们并排显示，而不会出现“类似行的行为”。因此，每列应将下一篇文章放在它的正下方，如下图所示（较短的项目下方没有不必要的空白）：

使用

float

、

flex-box

和

css-grid

或

display:inline-block

对我不起作用

尽管我希望避免在DOM中使用相同内容的两个循环，因为这对屏幕阅读器等来说是一种不好的行为

---

有没有一个解决方案我看不到没有大量的javascript？互联网充满了浮动：左搜索“两列”、“灵活列”的示例，我没有发现任何有用的信息。

您可以使用

display:flex

和

flex direction:column。通过向父容器添加高度（或最大高度），可以使元素自动转到下一列。然后可以更改某个元素的
order
属性，将它们推到第二行

此解决方案不是很通用，因为它将取决于内容，但它可能会给出如何实现的想法


$（'li'）。每个（函数（）{
$（this.css（'height'，Math.floor（（Math.random（）*50）+30）+“px”）；
})
ol{
列表样式：无；
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
最大高度：100vh；
保证金：0；
填充：0；
}
李{
框大小：边框框；
文本对齐：居中；
填充：10px；
背景：红色；
最大宽度：50%；
保证金：5px；
}
李：第n个孩子（2n）{
背景：绿色；
顺序：1；
}

一,
二,
三,
四,
五,
您可以使用
显示：flex
和
灵活方向：列。通过向父容器添加高度（或最大高度），可以使元素自动转到下一列。然后可以更改某个元素的
order
属性，将它们推到第二行

此解决方案不是很通用，因为它将取决于内容，但它可能会给出如何实现的想法


$（'li'）。每个（函数（）{
$（this.css（'height'，Math.floor（（Math.random（）*50）+30）+“px”）；
})
ol{
列表样式：无；
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
最大高度：100vh；
保证金：0；
填充：0；
}
李{
框大小：边框框；
文本对齐：居中；
填充：10px；
背景：红色；
最大宽度：50%；
保证金：5px；
}
李：第n个孩子（2n）{
背景：绿色；
顺序：1；
}

一,
二,
三,
四,
五,
如果出于某种原因希望避免使用flex，则可以使用
内联块执行此操作。当您希望将所有项目都包含在一列中时，只需使用媒体查询即可


div{
宽度：95%；
保证金：自动；
}
李{
背景：红色；
宽度：49%；
最小高度：300px；
显示：内联块；
文本对齐：居中；
字体大小：50px；
边缘顶部：10px；
}
@媒体屏幕和屏幕（最大宽度：600px）{
李{
宽度：98%；
}
}
.一{
背景：蓝色；
}
.三{
背景：绿色；
}

1
二,
3
四,
五,
如果出于某种原因希望避免使用flex，则可以使用
内联块执行此操作。当您希望将所有项目都包含在一列中时，只需使用媒体查询即可


div{
宽度：95%；
保证金：自动；
}
李{
背景：红色；
宽度：49%；
最小高度：300px；
显示：内联块；
文本对齐：居中；
字体大小：50px；
边缘顶部：10px；
}
@媒体屏幕和屏幕（最大宽度：600px）{
李{
宽度：98%；
}
}
.一{
背景：蓝色；
}
.三{
背景：绿色；
}

1
二,
3
四,
五,
我有另一个奇特的答案。它使用flex-direction:coulmn和前面的分页符强制第二列中的每一秒。这样，您对完整列表的高度没有限制。
请在单独的选项卡中检查JSFIDLE，以检查我如何使用断点将正常列表切换到两个COULMN

还要检查它是否在所有目标浏览器中运行：


部分{
显示器：flex；
柔性包装：包装；
}
文章{
框大小：边框框；
边框：1px纯灰；
宽度：100%；
高度：50px；
}
@介质（最小宽度：500px）{
部分{
弯曲方向：立柱；
}
文章{
宽度：50%；
}
第N条儿童（偶数）{
顺序：2；
}
第条：第N名儿童（2）{
/*这将在第二个孩子之后进入第二列
（不是元素后半部分的第一个元素）*/
前分页符：始终；
}
}
/*仅用于演示*/
第条：第一个孩子{
高度：66px；
背景色：#E0FE；
}
第条：第N名儿童（4）{
高度：80px；
背景色：#AEE0；
}
第条：第N名儿童（6）{
高度：130像素；
背景颜色：黄色；
}

1.
2.
3.
4.
5.
6.
7.
我有另一个奇特的答案。它使用flex-direction:coulmn和前面的分页符强制第二列中的每一秒。这样，您对完整列表的高度没有限制。
请在单独的选项卡中检查JSFIDLE，以检查我如何使用断点将正常列表切换到两个COULMN

还要检查它是否在所有目标浏览器中运行：


部分{
显示器：flex；
柔性包装：包装；
}
文章{
框大小：边框框；
边框：1px纯灰；
宽度：100%；
高度：50px；
}
@介质（最小宽度：500p