1

だから基本的にはサイドバーとナビゲーションバーが欲しい。しかし、div2 (サイドバー) の上部マージンを 110px に設定すると、div1 が下に移動します。私を助けてください。

<!doctype html>
    <html>
    <head>
        <link type="text/css" rel="stylesheet" href="Home.css">
        <title>Home</title>
    </head>

    <body>

        <div id="div1">
            <div id="div2"> 

            </div>
        </div>

    </body>


</html>

そしてCSS...

body {
    background-color:#CCC;
}

#div1 {
    width:auto;
    height:100px;
    background-color:gray;
    border-radius:10px;
}

#div2 {
    width: 150px;
    height: 500px;
    background-color: grey;
    border-radius: 10px;
    margin-top:110px;
}

http://jsfiddle.net/shane__kerr/5p8Qr/2/

4

4 に答える 4

0

margin-top を div2 に追加すると、Web ページは他の要素も作成して、その要素をその位置に「トラップ」します。これを修正するには、display: inline-block;この方法を使用する必要があります。

フロートを使用しないのはなぜですか？
基本的に float も表示をインラインブロックに設定しますが、要素も配置します。display-inline を使用すると、指定されたマージンのみが使用され、再配置されません。

jsフィドル

于 2013-10-08T21:05:42.060 に答える