2013-10-13 142 views
4

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

enter image description here

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

enter image description here

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

+1

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

+0

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

+0

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

回答

5

退房的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; 
} 
+0

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

+0

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