如何配置div來調整大小以包含內部div？

這個問題是由一個非常令人沮喪的問題引發的，我發現這是一個貫穿我的web開發的主題。如何配置div來調整大小以包含內部div？

我有一個這個話題的例子來顯示，以補充我的解釋。我在我的網站上有一個標題，在標題下方我想要一個非常標準的導航欄。你可以在http://www.ethoma.com/testhome.php看到這個。標題是頁面上唯一易於查看的img標記。這裏是該頁面的這個部分的基本html和css結構。

<div class="container" onclick="hide();"> 
    <div class="hhshomehead"> 
    <div class="logowrap"> 
    <center> 
     <img src="/ETPbrand.gif" /> 
    </center> 
     </div> 
     <div id="homeopt"> 
      <ul id="homeoptlist"> 
      <li id="homeoptnewpost"> 
     <a class="homeoptanchor" href="/hhsplus_create.php"> 
      New Post 
     </a> 
     </li> 
     </ul> 
     </div> 
    </div> 
    ...... more html ..... 
</div>

而CSS：

.hhshomehead 
{ 
    padding-top:8px; 
    padding-bottom:8px; 
    padding-left:8px; 
    padding-right:8px; 
    background-color:#ffffff; 
    -moz-box-shadow: 3px 3px 3px #aaa; 
    -webkit-box-shadow: 3px 3px 3px #aaa; 
    box-shadow: 3px 3px 3px #aaa; 
    width:100%; 
    border-radius:10px; 
} 

.hhshomebody 
{ 
    min-height:75%; 
    width:100%; 
} 

.logowrap 
{ 
    display:inline; 
} 

.homeopt 
{ 
    padding-top:8px; 
    padding-bottom:8px; 
    padding-left:8px; 
    padding-right:8px; 
    width:100%; 
    border-radius:10px; 

} 

.homeoptlist 
{ 
    display:inline; 
    list-style-type:none; 
    float:left; 
    margin-top:0px; 
    margin-bottom:0px; 
    padding-left:0px; 
} 

.homeoptanchor 
{ 
    text-decoration:none; 
    color:#1515b5; 
    padding-bottom:3px; 
    padding-top:3px; 
    padding-right:3px; 
    padding-left:3px; 
} 

.homeoptanchor:hover 
{ 
    text-decoration:underline; 
}

我知道class和id符號不符合正確的與CSS和HTML。我改變它在這篇文章中正確顯示。如果你看看在螢火蟲中產生的代碼，你會發現hhshomehead類似乎包含了標識圖像，但不包含它下面的條形圖。我不知道我是否缺少某些關鍵元素，因爲從我有限的經驗來看，如果標籤有孩子，標籤的孩子應該被父標籤包含。感謝任何花時間查看或回答這個問題的人 - 這裏的每個人都非常有幫助。（很抱歉，如果代碼不顯示退出的權利，我只在這裏發佈過一次）

來源

2011-07-27 Eric Thoma

我已經看了幾次，我不確定你的問題（或你的問題）。你的意思是：'你看到hhshomehead類似乎包含了標識圖像，而不是它下面的條。 – FiveTools

這是一個非常令人困惑的問題，我必須說。嘗試簡化您在此溝通的所有內容。我認爲人們對填充的大量信息感到不知所措。 – alt

我可以看到兩點改進：1.刪除'

'標籤並用'.logowrap {text-align：center;}'替換'.logowrap'。 2.刪除浮動，並關閉'＃homeoptlist'這兩個邊距 –

在您鏈接到#homeoptlist列表中的網站是floated，從文檔流中刪除。爲了讓父div擴展來包含它，你需要'清除'float，這可以通過對父元素應用'clearfix'來完成。見What methods of ‘clearfix’ can I use?

來源

2011-07-27 01:54:03

我沒有注意到有一個鏈接到網站，因爲它不是一個鏈接:(你的答案dr的版本：添加'溢出：隱藏「到'＃homeopt'。 – thirtydot

如何配置div來調整大小以包含內部div？

回答

相關問題