0

请在这里查看我遇到的问题：http: //jsfiddle.net/M8aV5/

#main {
width: 940px;
padding: 20px;
background-color: #ffffff;
}

（你最好看看 jsfiddle，因为我不完全确定哪个代码会影响这个问题）

正如您所看到的，当更多内容添加到侧边栏时，#main div 标签不会向下延伸，这会使一切看起来都很糟糕。

很长一段时间以来，我只是在#main div 标签上设置了一个标准高度，但现在感觉就像我希望内容能够在不丑陋的情况下扩展它想要的程度。

我真的很感激这方面的一些帮助，因为我完全不知道在哪里寻找答案。

4

1 回答 1

0

你需要清除浮动。有许多不同的方法可以实现这一目标。我推荐的方法称为 clearfix。在此处查看您的代码的实际操作：http: //jsfiddle.net/M8aV5/1/

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
 }

.cf:after {
  clear: both;
}

然后只需将.cf类添加到您的容器中#main。可以在此处找到有关此的详细信息：http: //nicolasgallagher.com/micro-clearfix-hack/

另一种选择是将overflow:auto属性添加到#main. 有关工作示例，请参阅http://jsfiddle.net/M8aV5/2/ 。

这也是一个相当受欢迎的选择。这两个选项之间有一个很好的讨论：ClearFix vs Overflow

于 2013-10-18T01:50:00.313 回答