javascript - 让div水平环绕

Question

我正在创建一个博客，其中搜索文章的结果将包含在 div 中。我网站的布局都是水平的(即文章水平滚动)。

制作单行 div 很容易，但这不是我想要的。如果我用图表解释会更容易。这是我希望 div 的样子:

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

但如果 window 更高，那么垂直方向的空间就更大，这应该可以:

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

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

我希望这可以通过纯 html/css 实现，但我觉得如果没有一点点 javascript 是不可能的。

Answer 1

您可以为此使用 Flexbox。您需要在父元素或 100vh 和 flex-direction: column 上设置固定高度。

* {
  box-sizing: border-box;
}
ul {
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

li {
  padding: 20px 60px;
  border: 1px solid black;
}

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>