html - 如何在页面上制作 3 个单独的列？

Question

这就是我想要实现的目标：在此处输入图像描述

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

我用于“测试盒”div的css会不会有问题？

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

有没有更好的方法来做到这一点？

score 5 · Accepted Answer

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

clear: 两者都会清除你的其他 div 不受浮动的影响，因此将它放在后面

score 1 · Accepted Answer

可以通过添加明确的来完成：两者；到测试框的 CSS：

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

score 0 · Accepted Answer

0

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

于 2013-08-30T15:35:21.243 回答

score 0 · Accepted Answer

0

你需要添加

.test-box{clear:both;}

于 2013-08-30T15:35:28.320 回答

score 0 · Accepted Answer

添加更多始终将其保留在css的末尾

.clearfix {
  clear:both;
}

并称之为

<div class="test-box clearfix">

score 0 · Accepted Answer

在这个班级

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

}

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

score 0 · Accepted Answer

我个人不会以 px 为单位设置高度，除非你 100% 确定文本永远不会改变。有不同的方法可以实现这一点，一种方法是：

1）例如给每个盒子“.box”一个单一的类

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

还记得清除：这些框之后的内容。

这将是一个响应式解决方案，尽管您可以使用基于 px 的解决方案。这真的取决于要求是什么。

7 回答 7