html - 宽度 100%，中心不起作用

Question

我对 HTML 有疑问。

#content div 不会获得宽度。
div 测试居中，#menu 应该有 15% 的宽度和 #info 到。
我试过清楚：两者；但它不会工作......
也许它是宽度 100% 的问题。

<!doctype html>
<html>
<head>

<style>
html, body {
    height: 100%;
}

body {
    margin: 0px;

    overflow: hidden;
}

#wrapper {
    background-color: green;

    width: 100%;
    height: 100%;
    position: fixed;
}

#upper {
    height: 15%;

    background-color: blue;
}

#test {
    height: 85%;

    width: 100%;
    margin: 0px auto;
}

#test #menu {
    width: 15%;
    height: 100%;

    float: left;

    /* scroll bar */
    overflow-y: scroll;
    overflow-x: hidden;

    background-color: red;
}

#test #content {
    width: 70%;
    height: 100%;

    float: left;
}

#test #content {
    width: 15%;
    height: 100%;

    float: left;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="upper">
        upper
        <!-- logo etc -->
    </div>
    <div id="test">
        <div id="menu">
            menu
        </div>
        <div id="content">
            content
        </div>
        <div id="info">
            info
        </div>
    </div>
</div>
</body>
</html>

有人能帮帮我吗！

score 2 · Accepted Answer

问题是您正在覆盖您的声明：

#test #content {
    width: 70%;
    height: 100%;

    float: left;
}

#test #content {
    width: 15%;
    height: 100%;

    float: left;
}

score 0 · Accepted Answer

我建议在inline-block元素上使用 of 而不是浮动。虽然它有自己的缺点..

http://jsfiddle.net/avrahamcool/gMMHL/1/

score -1 · Accepted Answer

自动边距不适用于百分比。您必须给它一个固定的尺寸才能使边距居中起作用。

html - 宽度 100%，中心不起作用

3 回答 3

Related

Reference