3

在这个页面上，我在div另一个之下有许多 s。菜单栏具有以下 CSS：

    #menu-bar {
        border-left:3px white solid;
        border-right:3px white solid;
    }

这很好用。接下来div，“内容”定义了相同的边框，但不显示。我能想到的唯一主要区别是“内容” div 有 2 个浮动 div 用于列，但我认为这并不重要。

任何想法为什么边界不显示？
也欢迎其他建设性的批评。

（出于测试目的，CSS 包含在 HTML 文件中。）

更新
mkkoverflow似乎是解决方案，但底部有一个小问题：在更新的页面中，尽管已margin-bottom为“内容”margin-top div和“页脚” div 为 0。我可以通过将页脚的上边距设置为负值来修复它，但这似乎不是正确的方法......

4

2 回答 2

2

div#content没有高度，因此没有边界。将此添加到您的 CSS 中，使其与内部 div 一样高：

#content:after {
  content: ".";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  line-height: 0;
}
于 2012-12-30T10:57:53.293 回答
1

很重要！如果您在#div 中只有浮动元素，它将没有定义高度和宽度。您需要将overflow: hidden属性添加到 #div [ 在您的情况下为 #content ] 以使其按预期工作。

您可以通过使用例如 firebug 或 chrome 开发人员工具看到这是正确的。悬停内容并查看它未突出显示，然后添加溢出：隐藏并观察这解决了问题。

于 2012-12-30T10:52:36.077 回答