Question

我有以下标题div设置，但是当只有最左边的div有内容时，标题的红色背景不会应用。为什么这样，因为'标题'div有内容，它的背景应该是红色的。

主管：

<title>Into the Breech</title>
<link href="Styles/Reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    body { font-family: Arial, Sans-Serif, System; }        
    #title { background-color: #F71831; font-weight: bold; }                    
    .title-segment-left { float: left; }
</style>

身体材料：

<div id="title">
    <div id="menu-title" class="title-segment-left" style="width: 200px;">
        Menu
    </div>
   <div id="main-title" class="title-segment-left" style="width: auto;">
        Home Page
    </div>
    <div id="right-title" style="float: right;">
        Provantage Media Management System
    </div>
</div>

Answer 1

您可能希望在最后一个div之后清除浮动。

Answer 2

当一个元素浮动时（如你的.title-segment-left），它的父元素布局不考虑浮动元素。当没有其他内容而不是浮动元素时，这会导致#title崩溃到0x0。由于它是0x0，因此背景不显示。

这是tutorial on floats，可能会有所帮助。

Answer 3

使用firebug并确认当你只浮动子元素时，父级的高度会折叠为“无”，你就会理解你的问题。

你可以通过添加一个没有内容的最后一个空div来解决这个问题。因此，它落后于左浮动的div，并强制父div延伸。像这样：

<div id="title">
    <div id="menu-title" class="title-segment-left" style="width: 200px;">
        Menu
    </div>
   <div id="main-title" class="title-segment-left" style="width: auto;">
        Home Page
    </div>
    <div id="right-title" style="float: right;">
        Provantage Media Management System
    </div>
    <div style="clear: left;"></div>
</div>

CSS上的背景颜色拼图标题/标题div

3 个答案: