html - 3列不同高度的html列表

Question

我正在尝试为博客创建一个 3 列布局，它具有响应性并在一定分辨率下适应 2 列。我的问题是我将块添加到带有浮动的列表中：左；但是有些块的高度比其他块大，并且布局错误。

<ul>
    <li>
        <h2><a href="#">Title</a></h2>
        <p>Message</p>
    </li>
    <li>
        <h2><a href="#">Title</a></h2>
        <p>Message</p>
    </li>
    <li>
        <h2><a href="#">Title</a></h2>
        <p>Message</p>
    </li>
    <li>
        <h2><a href="#">Title</a></h2>
        <p>Message</p>
    </li>
</ul>

例如，这是我的列表，但如果第 3 个列表项的高度较小，则第 4 个项目位于第 3 个项目之下，而不是所有 3 个项目之下。有没有办法强制一条线上的所有项目从同一位置开始？谢谢你，丹尼尔！

的CSS

ul {
    width: 104%;
    overflow: hidden;
}
li {
    width: 30.4%;
    float: left;
    margin-right: 2.5%;
    margin-bottom: 60px;
}

Answer 1

在 stackoverflow 上搜索了一些类似的东西后，我发现了一个人在帖子中给出的一个很酷的解决方案。实际上，您删除

float: left;

而是添加

display: inline-table;
vertical-align: top;

它很棒，因为它甚至可以在 IE8 中使用。

也谢谢大家在这里回复。

Answer 2

Add clear:left to every third element of your list:

.blog-articles li:nth-child(3n+1) {
    clear:left;   
}

and in similar fashion (2n+1) to every second element under certain resolution.

example: http://jsfiddle.net/kZqnL/

Answer 3

LIke this

demo

css

*{
    margin:0;
    padding:0;
}
.blog-articles ul {
    width: 100%;
    overflow: hidden;
    margin:0;
    padding:0;

    list-style-type:none;
}
.blog-articles li {
    width:24%;
      float:left;
    margin-right:1%;
    margin-bottom: 60px;
    background-color:yellow;
    list-style-type:none;
}
.blog-articles h2{
    margin:0;
    padding:0;

}