0

堆栈溢出用户。

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

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

所以基本上这些元素都具有浮动属性，所以它们彼此相邻，只要页面宽度允许它们。我的问题是他们有不同的高度。例子：

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

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

两列布局。第一个 li 元素（第一列）的高度大于第二列中的一个。第一列下面的元素就在它的正下方，但第二个元素不适合空间（这是因为第二列中的第一个元素的高度较小，所以它位于左边）并且位于第一列中的第二个元素旁边。

我想实现：

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

如果可能，自动。我必须使用柱状网格还是可以通过其他方式实现类似的效果？我希望我把我的问题说清楚了，对不起我的英语——我来自波兰。

期待听到您的答复！

4

2 回答 2

0

一个简单的方法是让你的列水平并带有display: block. 这样，它们将进入下一行并具有您想要的相同高度

于 2013-10-06T17:16:53.513 回答
0

对于这种对齐方式，我认为您几乎被同位素 - http://isotope.metafizzy.co/或砌体 - http://masonry.desandro.com/之类的东西所困扰。

于 2013-10-06T17:34:48.817 回答