不同高度的元素适合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

回答

相关问题