适合div的不同高度的元素

时间:2013-10-06 17:11:52

标签: html css css3

stackoverflow用户。

我正准备创建一个响应式设计,但这里有一个问题。我的设计基于列表架构:

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

所以基本上那些元素都具有float属性,所以只要页面宽度允许它们,它们就会彼此相邻。我的问题是他们有不同的高度。例如:

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

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

两列布局。第一个li元素(第一列)的高度大于第二列中的一个。第一列下方的元素位于其下方,但第二个元素不适合空间(由于第二列中的第一个元素具有较小的高度而保留),并且位于第一列中的第二个元素旁边。

我想实现:

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

如果可能,自动。我是否必须使用列网格,还是可以通过其他方式实现类似的功能?我希望我的问题清楚,对不起我的英语 - 我来自波兰。

期待您的回答!

2 个答案:

答案 0 :(得分:0)

一种简单的方法是让您的列水平并使用display: block。通过这种方式,他们将进入下一行并拥有您想要的相同高度

答案 1 :(得分:0)

对于那种对齐方式,我认为你几乎坚持像Isotope这样的东西 - http://isotope.metafizzy.co/或Masonry - http://masonry.desandro.com/