不同高度的元素適合div

我正在創建一個響應式設計的方式，但這裏出現了一個問題。我的設計是基於列表模式：

<ul> 
<li>First element code</li> 
<li>Second element code</li> 
(and so on (up to 20-30 elements) 
</ul>

所以基本上那些elments與浮動屬性，因此它們是彼此相鄰，只要在頁面寬度讓他們。我的問題是他們有不同的高度。示例：

**First LI*****  **Second LI****** 
***************  ***************** 
***************  ***************** 
***************  
***************  

**Third LI*****  **Fourth LI****** 
***************  ***************** 
***************  ***************** 
***************  ***************** 
***************  ***************

兩列布局。第一個元素（第一列）的高度比第二列中的高。第一列下面的元素正好在它下面，但第二個元素不適合空間（因爲第二列中的第一個元素具有較小高度而留下），並且位於第一列中第二個元素旁邊。

我想要實現：

**First LI*****  **Second LI****** 
***************  ***************** 
***************  ***************** 
***************  **Fourth LI****** 
***************  ***************** 
**Third LI*****  ***************** 
***************  ***************** 
*************** 
*************** 
***************

如果有可能，會自動。我是否必須使用列網格，還是可以通過其他方式實現類似的功能？我希望我明確表達了我的問題，對我的英語感到抱歉 - 我來自波蘭。

期待聽到你的答案！

來源

2013-10-06 Pawel Ryszka

對於那種排列方式，我認爲你幾乎被類似於Isotope - http://isotope.metafizzy.co/或Masonry - http://masonry.desandro.com/。

來源

2013-10-06 17:34:48

非常感謝你的有用的鏈接。這些腳本放緩了網站嗎？我的意思是：如果沒有這些腳本中的一個，或者在其中一個腳本上有一個漂亮的設計，是不是更好？加載時間的差異是否顯着？ –

這實際上取決於你所設計的設計，但根據我的經驗，這些腳本並不太重要。 –

好的，謝謝你;） –

一個簡單的方法來做到這一點將是你的列水平和display: block。這樣他們將走上下一條線，並擁有相同的高度，就像你想要的那樣

來源

2013-10-06 17:16:53 Hive7

這是目前的工作原理：第一個裏面有60％的寬度，第二個40％的寬度 - 這是不同的高度。我沒有任何專欄，只是一個李元素。我應該使用類似引導程序的列嗎？ –

如果你想這將工作 – Hive7

不同高度的元素適合div

回答

相關問題