使css列始终向左浮动

时间:2015-03-18 15:47:46

标签: html css css-float

我正在尝试使用列创建网格。问题是,一旦一列比另一列大,下一列就不会再向左浮动了。无论如何我可以解决这个问题吗?

The floating problem

该列的代码很简单:

.column { width: 320px; float: left; }

我想避免定义高度或使用浮动:右边。

谢谢

2 个答案:

答案 0 :(得分:2)

使用nth-child添加明确修复可能是一种解决方案。

.column:nth-child(3n+1) {
    clear: both; /* on row 4,7,10,13,16... */
}

演示:http://jsfiddle.net/0nxb6xnL/

答案 1 :(得分:0)

似乎它正在发生在不同的高度。你能让身高相同,然后再试一次吗?

喜欢

.column { width: 320px; height: 200px; float: left; }