0

HTML に問題があります。

#content div は幅を取得しません。
div テストは中央に配置され、#menu は 15% の幅と #info to を持つ必要があります。
clear: both; を試しました。しかし、うまくいきません...
幅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>

誰か助けてくれませんか！

4

3 に答える 3

2

問題は、宣言を上書きしていることです。

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

    float: left;
}

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

    float: left;
}
于 2013-09-07T17:57:53.437 に答える
0

inline-blockフローティングではなく、要素での使用をお勧めします。それは自分の欠点がありますが..

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

于 2013-09-07T18:03:55.120 に答える
-1

自動マージンはパーセンテージでは機能しません。マージンのセンタリングが機能するためには、固定寸法を指定する必要があります。

于 2013-09-07T17:55:34.877 に答える