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***** *****************
*************** *****************
***************
***************
***************
如果可能，自动。我是否必须使用列网格，还是可以通过其他方式实现类似的功能？我希望我的问题清楚，对不起我的英语 - 我来自波兰。
期待您的回答！
答案 0 :(得分：0)
一种简单的方法是让您的列水平并使用display: block。通过这种方式，他们将进入下一行并拥有您想要的相同高度
答案 1 :(得分：0)
对于那种对齐方式，我认为你几乎坚持像Isotope这样的东西 - http://isotope.metafizzy.co/或Masonry - http://masonry.desandro.com/。