砌體狀無序列表只有css

我聽說過砌體，我聽說過CSS3列，我想知道我是否可以簡單地使用無序列表來生成磚石般的網格或佈局。砌體狀無序列表只有css

請考慮以下幾點：我有一個包含八個項目的列表。每行有四個項目，並有一個未知的高度。如果列表項目顯示爲內聯塊，則如果上一行的項目包含較大的高度，則下一行將被壓下。

結果是這樣的：

enter image description here

你看第二行是如何被推下來？我希望只有第一個項目被推下來，而其餘的依然存在。

期望的結果： enter image description here

這裏的演示名單：

<ul> 
    <li style="height:125px;"></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li>This should be pulled up to maintain the margin bottom</</li> 
    <li>This should be pulled up to maintain the margin bottom</</li> 
    <li>This should be pulled up to maintain the margin bottom</</li> 
</ul>

ul { 
    list-style: none; 
    font-size: 0; /** inline-block hack **/ 
} 

ul li { 
    font-size: 14px; 

    display: inline-block; 
    vertical-align: top; 

    margin-right: calc((20px/3) - 5px); 
    margin-bottom: 5px; 

    height: 100px; 
    width: calc(25% - 5px); 
    border: 1px solid #222; 

} 

ul li:nth-child(4n + 4) { 
    margin-right: 0; 
}

Fiddle

來源

2014-11-05 davidxd33

，如果你不希望列表中的元素進行水平排列，我可以幫助。你可以使用它的列。

您想要將您的列表包裝在容器中並使用column-count就可以了。

我最近寫了一個codepen使用該技術來創建磚石效果。

如果你想要一個缺口，只需要改變行之間的gabs的cap-property，對於頂部和底部只需要爲列表元素添加邊距。

來源

2014-11-05 22:54:44 KreaTief

砌體狀無序列表只有css

回答

相關問題