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，因为浮动元素已从正常页面流中删除，因此需要清除。（另请参阅：All About Floats和CSS positioning）

HTML code：

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

CSS附加代码：

.clear {
    clear: both;
}

Answer 2

显示父div的另一种方式

HTML code：

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

CSS附加代码：

#header { overflow:hidden; }

Answer 3

我知道上述解决方案有效，因为我过去曾经使用过它们。但今天，我遇到了这种情况，我只是把位置：相对于内部div而且它解决了问题。

Div没有显示在父div中

3 个答案: