是否有可能與CSS

達到這樣一種網絡佈局的我要實現類似這樣是否有可能與CSS

enter image description here

問題的佈局是，我只需要使用一個UL的盒子，使它水平。因此，這裏是我做了什麼：我創建UL，和裏面的列表項浮動留給對方，但不是實現這一目標 - 這裏是發生了什麼：

enter image description here

我無法理解爲什麼第二行列表項目正在以這種方式定位，而不是嵌套到第一行？

來源

2013-10-13 cyrat

使用jQuery砌築這樣做是爲了實現這 –

這將是muc如果您發佈代碼，他人可以更輕鬆地爲您提供幫助，例如在[JSFiddle]上（http://jsfiddle.net/）。 – Joey

通常我會看到這種使用Javascript實現的佈局，並生成絕對定位的框。第二個圖像就是你使用'float：left;'得到的行爲。想象一下箱子從一邊飄來，因爲第一排是*滿*，其他的箱子則使用第二排。空的空間屬於第一行。 – kleinfreund

退房的Demo Here

您可以通過列數和列差距

HTML

<ul> 
    <li> 
     <img src="http://placehold.it/200x300/" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/200x400/" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/200x500/" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/200x500/" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/200x400/" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/200x200/" /> 
    </li> 
</ul>

CSS

ul { 
    list-style: none; 
    margin: 0; 
    -moz-column-count: 3; 
    -moz-column-gap: 0px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 0px; 
    column-count: 3; 
    column-gap: 0px; 
    width: 660px; 
    margin: 10px; 
} 
li { 
    width: 200px; 
}

來源

2013-10-13 09:48:30

它幾乎工作。我嘗試防止列中最後一個元素的奇怪切割。我的第一列的最後一個元素被切割，第一列的一列在第一列內，第二列在第二列。 – cyrat

嘗試添加display：inline-block至li。 –

是否有可能與CSS

回答

相關問題