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***** *****************
*************** *****************
***************
***************
***************
如果可能，自动。我必须使用柱状网格还是可以通过其他方式实现类似的目的？我希望我把我的问题说清楚了，对不起我的英语 - 我来自波兰。
期待听到您的回答!
最佳答案
对于那种对齐方式，我认为您几乎被 Isotope - http://isotope.metafizzy.co/ 之类的东西困住了。或砌体 - http://masonry.desandro.com/ .
关于html - 适合div的不同高度的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19211550/