Html Grid Using Ul li

Question

我需要幫助。 Plz見附圖。我正在嘗試使用任何高度的HTML ul li來製作網格。我正在試圖將一列接一列地放在一起，沒有任何空白。但不幸的是，第四列將走低。怎麼修 ？

 ul.brik{ 
    margin-left:-5px; 
     } 

     ul.brik li{ 
     display:inline-block; 
     width:32.5%; 
     margin-left:5px; 
     vertical-align:top; 
     } 

Answer 1

假設你不介意你的排序列垂直而非水平，而你不需要這個工作在舊的瀏覽器：

display: flex; 
flex-flow: column wrap; 

我們擁有一些其他flexbox properties應該得到你的佈局。

Answer 2

發生這種情況，因爲每個ul出現在它是目前在該行的頂部，一旦一個換行符介紹，接下來ul將出現在你看到它。

要解決這個問題，請將每列分開div，並將其放入ul。

您需要將div的顯示設置爲inline-block，以使它們水平堆疊。

Answer 3

我不太確定你在找什麼。它看起來像你有更多的div它們分開，也是我認爲你的目的，你可以添加一個

min-height:50px; 
max-height:250px 
overflow:hidden; 
/* you could also try*/ 
position:absolute; 
top:20px; 
left:20px;