如果有足夠的空間，如何將div列表分為兩列？

Question

假設我有8個div。 如果有足夠的空間（通過min-width ），我希望將它們分成兩列：

 1  5
 2  6
 3  7
 4  8

但是，如果我只是設置display: inline-block ，它們就會像這樣分裂，這不是我想要的：

 1  2
 3  4
 5  6
 7  8

理想情況下，我正在尋找一種允許大小不相等的解決方案，因此，如果只有6個，但＃1和＃2的高度是兩倍，結果將如下所示：

1  3
1  4
2  5
2  6

在純CSS中有可能嗎？ 或者，如果沒有，如何在JS中完成呢？

Answer 1

您可以使用CSS列來實現此行為：

 html { font-size: 62.5%; } .columnWrapper div { display: inline-block; width: 100%; height: 10rem; color: #fff; text-align: center; font-size: 5rem; line-height: 10rem; background-color: #4caf50; margin-bottom: 0.5rem; } .columnWrapper { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 0.5rem; -moz-column-gap: 0.5rem; column-gap: 0.5rem; width: 20%; margin: 0 auto; } @media screen and (max-width: 500px) { .columnWrapper { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } 

 <div class="columnWrapper"> <div>1</div ><div>2</div ><div>3</div ><div>4</div ><div>5</div ><div>6</div ><div>7</div ><div>8</div> </div> 

或者看這個小提琴。

對於只有6個元素的情況下，看到這個小提琴（相同的代碼）。