css - 所有 列表的高度相同

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