Javascript 让div水平缠绕

我正在制作一个博客，其中搜索文章的结果将包含在divs中。我的网站的布局都是水平的（即文章水平滚动）

制作一行div很容易，但这不是我想要的。如果我用图表解释的话会更容易。下面是我想要的div：

 ______________   ______________   ______________
|    Div 1     | |    Div 4     | |    Div 7     |
|______________| |______________| |______________|
 ______________   ______________   ______________
|    Div 2     | |    Div 5     | |    Div 8     |
|______________| |______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 6     |
|______________| |______________|

但是如果窗户更高，那么在垂直方向上会有更多的空间，这将提供：

 ______________   ______________ 
|    Div 1     | |    Div 5     |
|______________| |______________|
 ______________   ______________ 
|    Div 2     | |    Div 6     |
|______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 7     |
|______________| |______________|
 ______________   ______________
|    Div 4     | |    Div 8     |
|______________| |______________|

---

这就是我所说的水平包装。简言之，div在占用新列之前占据了尽可能多的垂直空间

---

我希望这在纯html/css中是可能的，但我有一种感觉，没有一点javascript是不可能的。

你可以使用Flexbox来实现这一点。您需要在父元素或

100vh

和

flex direction:column

上设置固定高度

*{
框大小：边框框；
}
保险商实验室{
显示器：flex；
高度：100vh；
弯曲方向：立柱；
调整项目：灵活启动；
调整内容：灵活启动；
柔性包装：包装；
列表样式：无；
填充：0；
}
李{
填充：20px 60px；
边框：1px纯黑；
}

---

1
2
3
4
5
6
7
8
我认为在纯css中，这只能通过flexbox实现：

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;

活动示例（更改容器的高度）：


编辑：是的，使用100vh作为容器的大小是一个更优雅的解决方案：）
谁告诉过你这在CSS/HTML中是不可能的。这是可能的。下面是一个使用简单css而不是flexbox的示例。您只需要知道放置CSS属性的正确区域。在您的情况下，您需要将框设置为
float:left
，以消耗容器的宽度，该宽度可以是动态的，如50vw，以消耗50%的可视屏幕宽度或百分比（如果您愿意）


希望这有帮助

[编辑]

因为问题在最后一行解释中是水平的，所以我没能理解。无论如何，这个答案可以帮助那些需要纯css解决方案进行水平堆叠的人
 “这就是我所说的水平换行。简言之，div在占用新列之前会占用尽可能多的水平空间。”我想你的意思是在占用新行之前。是吗？对不起，我指的是垂直空间。我会编辑的。嗨，这正是我想要的。以前从未尝试过flex box，但我想我必须学习它。这可能比使用js更好。