Question

我想设置两个div，如下所示。 http://snag.gy/ynuiY.jpg

这是我的HTML代码

<div id="topbar">
This is a top bar
</div>

<div id="wrapper"> 
wrapper
</div>

这是我的CSS

#wrapper{
    z-index:2;
    marign-top: 30px;
    width:80%;
    height:auto;
    background-color:#FFF;
    left:auto ;
    right:auto ;
    margin: auto;

}

#topbar{
    height:30px;
    width:100%;
    background-color:#333;
    position:absolute;
    top:0px;
    left: 0px;
    right: 0px;
    color:#FFF;
    overflow: hidden;
}

但输出如下。（没有包装） http://i.stack.imgur.com/DXuWD.jpg

请帮我解决这个问题。

Answer 1

您必须将#wrapper边距更改为填充

JSfiddle Demo

<强> CSS

#wrapper{
    padding-top: 30px;
}

Answer 2

我认为这就是你之后所做的： http://jsfiddle.net/ht8k40tr/

问题是由于您设置边距的顺序。

目前您将上边距设置为30px，但是您通过将所有边距设置为自动来重置该边距，更简单的方法是将边距设置为以下{{1将上边距设置为30px，将剩余边距设置为自动。

Answer 3

另一种解决方案是将#topbar位置设为relative：

#topbar{
    height:30px;
    width:100%;
    background-color:#333;
    position:relative;/*Change to relative*/
    color:#FFF;
    overflow: hidden;
}

同样是margin-top否marign-top

fiddle

Answer 4

更改“margin-top：30px;” “填充顶部：30px;”

#wrapper {
    padding-top: 30px;
    width:80%;
    height:auto;
    background-color:#FFF;
    left:auto ;
    right:auto ;
    margin: auto;
}

把一个接一个的div

4 个答案: