0

左に固定サイズのメニューバーになるdivを1つ持たせようとしています。次に、残りのスペースが右側にある別の div。

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
        <style>
                #header{
                    height:50px;
                    background-color:red;
                    border-radius:10px;
                }
                .left{
                    width:100px;
                    height:500px;
                    background-color:green;
                    border-radius:10px;
                    float:left;
                }
                .right{
                    background-color:lightskyblue;
                    border-radius:10px;
                    height:500px;
                    margin-left:100px;
                }
                #footer {
                    height:50px;
                    background-color:violet;
                    border-radius:10px;
                    clear:both;
                }
            </style>
    </head>
    <body>
        <div id="header"></div>

        <div class="left"></div>
        <div class="right">
            <h3>Andrew: The Resumé</h3>
            <p>Languages I know:</p>
            <ul>
                <li>Arabic</li>
                <li>Java</li>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </div>
        <div id="footer"></div>
    </body>
</html>

これは私が手に入れることができる最も近いものですが、箱は均一ではありません. おそらく、一方の div で float を使用し、もう一方の div では使用しなかったためです。float:left を使用すると、右側の div の幅が画面の残りの部分を埋めません。ヘルプ！

4

2 に答える 2

0

左右の div をコンテナーにラップしてみてください。

<div id="container">
        <div class="left"></div>
        <div class="right">
            <h3>Andrew: The Resumé</h3>
            <p>Languages I know:</p>
            <ul>
                <li>Arabic</li>
                <li>Java</li>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </div>
</div>

css では float left と right を使用します。コンテナは、その子がいたるところに壊れないようにするために使用されます。状況に応じて、clearfix および/または margin:0 auto を適用できます。現在の子 div に適用します。

.left{
    float:left;
}
.right{
    float:right;
}

これが役立つことを願っています。レスポンシブの目的で左と右のコンテナの両方を左にフロートさせ、動的な幅 (別名パーセンテージ) を使用する傾向があります。

于 2013-10-21T01:02:49.927 に答える