如何在页面上创建3个单独的列？

Question

这就是我想要实现的目标：

So far, this is the code I have.

列的工作方式应该如此。问题是，我在HTML中的列之后放置的任何内容实际上都在页面上的列后面，而不是像我想要的那样在它们之下。

我用于“测试盒”div的css会出现问题吗？

.test-box{
    background:red;
    width:100%;
    height:300px;
}

有更好的方法吗？

Answer 1

.test-box{
background:red;
width:100%;
height:300px;
clear:both;
}

清除：两者都会清除你的其他div受浮动影响，因此将其置于

之后

Answer 2

可以通过添加clear：both;到测试盒的CSS：

.test-box{
    clear: both;
    background:red;
    width:100%;
    height:300px;
}

Answer 3

添加clear: both;或float: left;（如果3列div占据整个宽度。

Answer 4

你需要添加

.test-box{clear:both;}

jsFiddle

Answer 5

添加更多内容始终将其保留在CSS的末尾

.clearfix {
  clear:both;
}

并将其命名为

<div class="test-box clearfix">

Answer 6

在这个课程中

.three-columns div{
    ... 
    display:table-cell;

}

只需删除float：left并添加display：table-cell

Answer 7

除非您100％确定文本永远不会改变，否则我个人不会在px中设置高度。有不同的方法来实现这一点，一种方法是：

1）为每个框“.box”提供一个单词，例如

.box{
  width:33.33%;
  margin:20px 0 0 20px;
  float:left;
} 

还记得清楚：这些盒子之后的内容。

虽然您可以使用基于px的解决方案，但这将是一个响应式解决方案。这实际上取决于要求是什么。