宽度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>

有人可以帮我！

Answer 1

问题在于您正在覆盖声明：

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

    float: left;
}

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

    float: left;
}

Answer 2

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

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

Answer 3

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

宽度100％，居中

问题描述

3 个解决方案

解决方案1
2 2013-09-07 17:57:53

解决方案2
0 2013-09-07 18:03:55

解决方案3
-1 2013-09-07 17:55:34

宽度100％，居中

问题描述

3 个解决方案

解决方案1 2 2013-09-07 17:57:53

解决方案2 0 2013-09-07 18:03:55

解决方案3 -1 2013-09-07 17:55:34

解决方案1
2 2013-09-07 17:57:53

解决方案2
0 2013-09-07 18:03:55

解决方案3
-1 2013-09-07 17:55:34