Question

我需要创建两个全宽标题，但我似乎无法找到一种方法来执行它们而不使用位置绝对，因为如果我使用position：absolute，我不能使用margin-bottom，这是我需要的。我该怎么办？

这就是我的尝试：

<div class="header1">
</div>

<div class="header2">
</div>

.header1 {
background-color: red;
    margin-top: 110px;
    color: #FFFFFF;
    height: 35px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.header2 {
background-color: blue;
    margin-top: 150px;
    color: #FFFFFF;
    height: 35px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

Answer 1

不确定我是否正确理解了问题，但

body {
    margin:0
}
.header1 {
    background-color: red;
    color: #FFFFFF;
    height: 35px;
    width: 100%;
}
.header2 {
    background-color: blue;
    color: #FFFFFF;
    height: 35px;
    width: 100%;
}

将为您提供2个全宽标题

DEMO

如何在页面顶部创建两个全宽标题，而不是位置：绝对？

1 个答案: