達到這樣一種網絡佈局的我要實現類似這樣是否有可能與CSS
問題的佈局是,我只需要使用一個UL的盒子,使它水平。因此,這裏是我做了什麼: 我創建UL,和裏面的列表項浮動留給對方,但不是實現這一目標 - 這裏是發生了什麼:
我無法理解爲什麼第二行列表項目正在以這種方式定位,而不是嵌套到第一行?
達到這樣一種網絡佈局的我要實現類似這樣是否有可能與CSS
問題的佈局是,我只需要使用一個UL的盒子,使它水平。因此,這裏是我做了什麼: 我創建UL,和裏面的列表項浮動留給對方,但不是實現這一目標 - 這裏是發生了什麼:
我無法理解爲什麼第二行列表項目正在以這種方式定位,而不是嵌套到第一行?
退房的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;
}
它幾乎工作。我嘗試防止列中最後一個元素的奇怪切割。我的第一列的最後一個元素被切割,第一列的一列在第一列內,第二列在第二列。 – cyrat
嘗試添加display:inline-block至li。 –
使用jQuery砌築這樣做是爲了實現這 –
這將是muc如果您發佈代碼,他人可以更輕鬆地爲您提供幫助,例如在[JSFiddle]上(http://jsfiddle.net/)。 – Joey
通常我會看到這種使用Javascript實現的佈局,並生成絕對定位的框。第二個圖像就是你使用'float:left;'得到的行爲。想象一下箱子從一邊飄來,因爲第一排是*滿*,其他的箱子則使用第二排。空的空間屬於第一行。 – kleinfreund