一些奇怪的佈局只使用不同高度的ul/li元素

是否可以使用ul/li元素創建以下佈局（我的意思是使用某種正常方式，沒有一些奇怪的黑客）？一些奇怪的佈局只使用不同高度的ul/li元素

enter image description here

在紅色的所有元素都具有相同的寬度。

爲什麼我要使用ul/li元素？

整個頁面上有非常相似佈局的ul/li元素，但是所有項目都是相同的widtha和height。所以風格已經存在於單獨的li元素中（它有一些特定的背景，每個裏面都有一些元素，其樣式已經被定義爲li的子元素等等）。所以這就是我問這個問題的原因。最好的一點是，我可以使用類來實現相同的風格。我會爲此更新css。

如果我不能使用ul/li，那麼實現這種佈局的最佳方法是什麼？

來源

2013-07-19 renathy

如果必須使用UL/li元素，我也幫不了你。但如果你不是，請嘗試jQuery Masonry插件http://masonry.desandro.com/。你可以製作http://erikjohanssonphoto.com/work/imagecats/personal/。 – Heejin

@Heejin他說紅色框的大小相同，所以我認爲jQuery Masonry在這裏不會派上用場！ –

你不必只使用ul和li，你可以使用具有相同佈局樣式的類和id – Keith

工作實例與li和ul在jsFiddle

enter image description here

來源

2013-07-19 13:15:07 acudars

如果這回答你的問題，請將其標記爲已回答 – acudars

我只是簡單地刪除了
標籤並更新了小提琴 – acudars

很棒的例子。 –

一些奇怪的佈局只使用不同高度的ul/li元素

回答

相關問題