Question

我正在尝试为博客创建一个3列布局，它响应并在特定分辨率下适应2列。我的问题是我使用float：left添加列表中的块;但有些街区的高度比其他街区高，布局错误。

<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

添加清除：左侧列表中的每个第三个元素：

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

并以类似的方式（2n + 1）与特定分辨率下的每一个元素。

示例：http://jsfiddle.net/kZqnL/

Answer 3

喜欢这个

<强> 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;

}

在具有不同高度的3列上的html列表

3 个答案: