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而不是浮动。虽然它有自己的缺点..

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

Answer 3

自动边距不适用于百分比。您必须给它一个固定的维度才能使保证金中心起作用。

宽度100％，中心不会工作

3 个答案: