DIV的不是父DIV顯示

我試圖讓div的出現在父DIV代碼可以發現如下：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中，但它不出現，我不明白爲什麼，任何幫助將不勝感激。

來源

2011-04-22 Eric

我可以在Chrome中看到。你使用的是什麼瀏覽器？ – IHateATMFees 2011-04-22 04:33:43

您需要在最後一個div後添加一個清除，因爲浮動元素將從常規頁面流中刪除，因此需要清除。（參見：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; 
}

來源

2011-04-22 04:35:35 mc10

參考爲什麼你需要做到這一點 - 「CSS定位」（http://www.brainjar.com/css/positioning/default3.asp）：「...不像正常流程中的盒子，垂直邊距漂浮盒子的盒子不會摺疊，盒子的邊緣可以高於或低於它。「 – Faust 2011-04-22 04:44:37

我已編輯我的帖子以包含您的鏈接。 – mc10 2011-04-22 04:47:53

另一種方式展現父DIV

HTML代碼：

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

CSS附加代碼：

#header { overflow:hidden; }

來源

2011-04-22 08:43:49 Ruhul

我知道上面的解決方案工作，因爲我在過去有他們。但是今天，我遇到了這種情況，我只是把位置放在了內部div上，並且解決了問題。

來源

2013-10-04 14:21:35 user1889992

DIV的不是父DIV顯示

回答

相關問題