Question

所以基本上我想要一个侧栏和一个导航栏。但是当我将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/

Answer 1

将#div1中的身高更改为auto并在margin-top:100px中设置#div1，而不是#div2。

Answer 2

Fiddle

现在我为div1和float:left做了一个width:100%和clear:both到div2。

别忘了将clear:both添加到div1

中的任何div

Answer 3

当您向div2添加margin-top时，该网页还会创建其他元素以“捕获”该元素的位置。为了解决这个问题，您应该使用display: inline-block;这种方式，所有未给定的保证金都已消失。

为什么不使用float？
基本上，float也将显示设置为内联块，但也会定位元素。使用display-inline只会使用给定的边距，而无需重新定位。

<强> jsFiddle

Answer 4

我认为你的CSS看起来不错。但我认为div 1和2不应该在彼此内部以实现你想要的。

试试这个：

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

HTML一个div影响另一个div，但我只想定位一个div

4 个答案:

演示here