Question

我有以下网格：

<div class="container">
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
</div>

每篇文章都向左浮动，宽度为33％，如下所示：

[col][col][col]
[col][col][col]
[col][col][col]

但是，有时列的高度较大并完全打破浮动，如下所示：

 [col][col][col]
 [col][col]
 [col]
 [col][col][col]

为了防止这种情况，我通常将每个3包装在一个包装器中，如下所示：

[row][col][col][col][/row]
[row][col][col][col][/row]
[row][col][col][col][/row]

当内容获取列的高度不同时，这会阻止它中断。这是我想要模仿的那种解决方案。

然而，我不能包装每个3，因为我还用AJAX（无限滚动）加载更多帖子。如果列数不能被3整除，则可能会破坏它：

[row][col][col][col][/row]
[row][col][col][col][/row]
[row][col][/row] //this was left over

//loaded content
[row][col][col][col][/row]
[row][col][col][col][/row]

为了尝试解决这个问题，我会依靠CSS来解决这个问题。我试过这个解决方案，但它不起作用：

.col33:nth-child(3n):after {
content: '.';
clear: both;
}

有没有人知道如何使用CSS而不清除容器来清除浮动？

Answer 1

我通常在每3件物品后添加。我不认为只有CSS解决方案：

<div class="container">
    <article class="col33 h60"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <div style="clear:both"></div>
    <article class="col33 h60"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <div style="clear:both"></div>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <div style="clear:both"></div>
    <article class="col33"></article>
    <article class="col33 h60"></article>
    <article class="col33"></article>
    <div style="clear:both"></div>
    <article class="col33"></article>
</div>

Answer 2

我认为您想要的解决方案是使用nth-child

清除浮动广告

.col33:nth-child(3n+1) {
    clear: both;
}

fiddle

告诉我这是否适合你。

Answer 3

解决方案

我可以使用display: inline-block和vertical-align: top来实现相同的效果，而不是使用浮点数。这是修复它的CSS：

.col33 {
    width: 33%;
    display: inline-block;
    float: none;
    padding: 15px;
    vertical-align: top;
    font-size: 0;
}

唯一不好的是它创建的不必要的空白区域，我处理的是将宽度减小到33%而不是33.3%并使父级font-size: 0;

Answer 4

添加此css

.container {
width: 500px;
background-color: blue;
overflow: hidden;


}
.col33 {
width: 31%;
height: 40px;
background-color: red;
float: left;
margin-left: 1px;
margin-top: 3px;
margin-right: 1px;
}
.h60 {
height: 60px;
}
.col33:nth-child(3n+1){
background-color: orange;
clear: both;
}

.col33:nth-child(3n):after {
content: '.';
clear: both;
}

DEMO

在不使用容器的情况下清除浮子

4 个答案:

解决方案