浮动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;和主容器

回答

相关问题