Question

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

我总是在开设这样的网站时有点开球，但它已经到了我已经足够好的时候了。

所以我有两个div，left和center，都设置为float：left;这些都在＆＃34;主要＆＃34;部分，但因为这两个是浮动的，＆＃34;主要＆＃34;截面的高度小于这两个由于浮动质量而重叠的截面。

我试过显示：inline＆amp; 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;
}

提前感谢您的帮助！

Answer 1

你只需要添加：

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

Answer 2

试试这个：

#main_container {
    float:left;
}

See the result

Answer 3

添加

overflow:hidden

到#main

因为您已在容器上设置了宽度，所以应将所有内容保存在框中

CSS问题浮点数：左;和主要容器

3 个答案: