浮動CSS問題：left;和主容器

我遇到了一些問題，希望得到一些建議。浮動CSS問題：left;和主容器

我一直對這樣的網站進行點播，但是它已經到了我已經足以抵擋它的那一天。

所以我有兩個div，left和center，都設置爲float：left;這些都在「主」部分，但由於兩者都是浮動的，所以「主」部分的高度比這兩部分高，因爲浮動質量而重疊。

我試過display：inline & display：inline-block，但是第一個將它們疊放在另一個之上，而後者完全讓我失去了我的對應div的CSS。

希望有人能幫助我，如果是的話，那將是不勝感激！下面的代碼：

HTML：

<div id="main_container"> 
     <aside id="left"> 
      <p id="settings_header"> 
       Account Settings 
      </p> 
     <hr> 
      <img id="profile_picture" src="#" /> 
      <div id="settings_option"> 
       <a href="#"> 
        Settings 
       </a> 
      </div> 
      <div id="settings_option"> 
       <a href="#"> 
        Sign Out 
       </a> 
      </div> 
     </aside> 

     <div id="center"> 
      <h2>  
       Latest & Greatest Topics 
      </h2> 
     </div> 
    </div>

CSS：

#main_container { 
    width:82%; 
    min-width:932px; 
    margin-left:auto; 
    margin-right:auto; 
    padding:10px 10px; 
    box-shadow:inset 0 0 10px #000; 
    background-color:#ccc; 
} 

#left { 
    width:26%; 
    min-width:176.4px; 
    margin-right:5px; 
    display:inline-block; 
    float:left; 
    background-color:#fff; 
    border:1px solid #222; 
    box-shadow:0 0 5px #000; 
    font-family: verdana; 
    font-size:12px; 
    color: #000; 
} 

#center { 
    width:68%; 
    min-width:670.6px; 
    margin-left:5px; 
    margin-right:5px; 
    display:inline-block; 
    float:left; 
    background-color:#fff; 
    border:1px solid #222; 
    box-shadow:0 0 5px #000; 
    font-family: verdana; 
    font-size:12px; 
    color: #333; 
    text-align:left; 
} 

#center h2 { 
    font-family:tahoma; 
    font-weight:bold; 
    font-size:18px; 
    text-decoration:underline; 
    text-align:center; 
    color:black; 
    letter-spacing:1px; 
}

感謝提前任何幫助！

來源

2013-06-18 user1907323

你能分享它嗎？ – skparwal

你只需要補充一點：

#main_container:after { 
    content: ""; 
    display: block; 
    clear: both; 
}

來源

2013-06-18 08:01:21

非常感謝您的快速和正確的迴應，非常感謝！如果我有足夠的代表，我會投票，但謝謝你！ – user1907323

@ user1907323我投你一票;） –

謝謝阿德:)現在搬到更大更好的東西;） – user1907323

試試這個：

#main_container { 
    float:left; 
}

See the result

來源

2013-06-18 08:03:27 skparwal

添加

overflow:hidden

到#main

因爲你已經在你的容器上設置了寬度，所有東西都應該放在方框內

來源

2013-06-18 08:04:53 amburnside

浮動CSS問題：left;和主容器

回答

相關問題