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/。