css - Div 未显示在父 div 中

Question

我试图让 div 出现在父 div 代码中可以在下面找到:

<div id="header">
    <div class="header-left">
        LOGO
    </div>
    <div class="header-right">
        OPTIONS
    </div>
</div>

#header
{
background-color:#FFFFFF;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom:2px solid #C0C0C0;
border-left:2px solid #C0C0C0;
border-right:2px solid #C0C0C0;
color:#ff3427;
display:block;
font-family: "Book Antiqua", "Cambria", serif;
margin:auto;
width:980px;
position:relative;
}

.header-left
{
color:#ff3427;
display:block;
font-family: "Book Antiqua", "Cambria", serif;
font-size:32px;
float:left;
text-align:left;
width:320px;
position:static;
}

.header-right
{
color:#ff3427;
display:block;
font-family: "Book Antiqua", "Cambria", serif;
font-size:12px;
float:right;
text-align:right;
width:655px;
position:static;
}

您可以在以下位置找到它目前的样子:http://mytvisfree.com

我希望这两个 div 类出现在标题 div 中，但它没有出现，而且我不明白为什么，任何帮助将不胜感激。

Answer 1

您需要在最后一个 div 之后添加一个 clear，因为 float 元素已从正常页面流中移除，因此需要 clear。 (另请参阅:All About Floats 和 CSS positioning)

HTML代码:

<div id="header">
    <div class="header-left">
        LOGO
    </div>
    <div class="header-right">
        OPTIONS
    </div>
    <div class="clear"></div>
</div>

CSS 附加代码:

.clear {
    clear: both;
}