獲取div水平包裝

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上設置固定高度。

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

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解決方案進行水平堆疊的人。