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

Question

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

到目前为止,这是我的代码.

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

我用于"测试盒"div的css会有问题吗？

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

有没有更好的方法呢？

Answer 1

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

明确:两者都会清除你的另一个div受到浮子的影响,因此放置它