1

我遇到了一个问题，希望得到一些建议。

我一直对布置这样的网站有点不耐烦，但到了我已经受够了抵御它的那一天。

所以我有两个 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;
}

提前感谢您的帮助！

4

3 回答 3

2

你只需要添加这个：

#main_container:after {
    content: "";
    display: block;
    clear: both;
}
于 2013-06-18T08:01:21.880 回答
0

添加

overflow:hidden

到#main

因为你已经在你的容器上设置了宽度，所以所有东西都应该放在盒子里

于 2013-06-18T08:04:53.897 回答
0

试试这个：

#main_container {
    float:left;
}

查看结果

于 2013-06-18T08:03:27.640 回答