Question

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

制作一行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就不可能。

Answer 1

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我认为在纯CSS中这只能用flexbox来完成：

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

实时示例（更改容器的高度）：

https://codepen.io/MattDiMu/pen/zdBxad

编辑：是的，使用100vh作为容器的大小是更优雅的解决方案：）

Answer 3

谁告诉你这在CSS / HTML中是不可能的。有可能的。这是一个使用简单的CSS而不是flexbox的示例。您只需要知道将CSS属性放入的正确区域。在您的情况下，您需要使用float:left的框来消耗容器的宽度，该容器的宽度可以是50vw，可以消耗可视屏幕宽度的50％，或者如果您愿意，可以使用百分比。

https://codepen.io/Nasir_T/pen/rzLavm

希望这有帮助。

[编辑]

由于这个问题在最后一行解释时是横向的，所以我很想知道它。无论如何，这个答案可以帮助那些需要纯css解决方案进行水平堆叠的人。

获取div水平包装

3 个答案: