Html 不同高度的元素适合div

stackoverflow用户

我正在创建一个响应性强的设计，但这里有一个问题。我的设计基于列表模式：

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

两列布局。第一个li元素（第一列）的高度大于第二列中的高度。第一列下面的图元位于其正下方，但第二个图元不适合该空间（该空间位于左侧，因为第二列中的第一个图元的高度较小），并且位于第一列中第二个图元的旁边

我想实现：

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

如果可能的话，自动。我必须使用柱网吗？或者我可以通过另一种方式实现类似的功能吗？我希望我的问题说清楚，对不起我的英语-我来自波兰

---

期待您的回答

一个简单的方法是将列水平放置，并使用

显示：block

。这样，它们将进入下一条线，并具有你想要的相同高度。

对于这种对齐方式，我认为你几乎被同位素——或砖石——之类的东西卡住了。

这就是它目前的工作原理：第一个李有60%的宽度，第二个是40%的宽度——高度不同。我没有任何专栏，只有一个李元素。我应该使用类似引导的列吗？非常感谢您提供的有用链接。那些脚本会让网站慢很多吗？我的意思是：如果没有这些脚本的话，有一个更丑陋的设计会更好，还是有一个很好的设计会更好？加载时间的差异是否显著？这确实取决于您的目标设计，但根据我的经验，脚本也不会太重而无法使用。

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