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

小提琴

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

不要忘记添加clear:both到 div1 内的任何 div

于 2013-10-08T20:57:58.497 回答
0

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

尝试这个：

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

演示在这里

于 2013-10-09T06:24:10.297 回答
0

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

于 2013-10-08T20:55:28.777 回答
0

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

为什么不使用浮动？
好吧，基本上 float 还将显示设置为 inline-block 但也会定位元素。使用 display-inline 只会使用给定的边距，而不会重新定位它。

jsFiddle

于 2013-10-08T21:05:42.060 回答