Question

我已经创建了一个列表样式来显示一些图像和描述文本。但是，当列表下降到另一行时，它将不会跟第一行的高度相同。

无论如何，这可以使列表相应对齐吗？

<ul>
<li><div class="dashed-box"></div>
<h3>title a</h3>
<h4>Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</h4>
</li>

<li><div class="dashed-box"></div>
<h3>title b</h3>
<h4>Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</h4>
</li>

<li><div class="dashed-box"></div>
<h3>title c</h3>
<h4>Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu</h4>
</li>

<li><div class="dashed-box"></div>
<h3>title d</h3>
<h4>Cras dapibus. Vivamus elementum semper nisi.</h4>
</li>    

<li><div class="dashed-box"></div>
<h3>title e</h3>
<h4>Cras dapibus. Vivamus elementum semper nisi. Cras dapibus. Vivamus elementum semper nisi.</h4>
</li>  

<li><div class="dashed-box"></div>
<h3>title f</h3>
<h4> Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</h4>
</li>    

</ul>

这是我的榜样 http://jsfiddle.net/pdh8Lacd/2/

Answer 1

您可以使用FlexBox

解决此问题

.list{ display: -webkit-flex;
display: -ms-flexbox;
display: flex;
 -webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

和

.list__item { display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

这是一个有效的jsfiddle

Answer 2

你有没有尝试过使用calc来计算元素的宽度（所以它是响应的），并说我们每行需要4个元素，然后我们应用第n个子选择器来清除结果？

我所做的改变是：

li { float: left; width: calc((100% / 4) - 20px); margin: 20px 0;}

而不是

li { float: left; width:250px; margin: 20px 0;}

并添加以下行：

li:nth-child(4n + 1) { clear: both; }

您可以查看更新后的小提琴：http://jsfiddle.net/pdh8Lacd/8/

希望这有帮助。

所有<li>列表</li>的高度相同

2 个答案: