Question

我试图将中间块（带有灰色背景）拉伸到浏览器的两侧。我已经能够通过以下代码实现这一点：

#aboutBlock {
   background: #f2f2f1; 
   position:absolute; 
   left:0; 
   width: 100%;
}

现在的问题是，当这个div需要直接出现在这个div之后，后面的div显示在这个div之下。

Answer 1

您在宽度为950px的元素中包含该元素：

.block1 {
    width: 950px;
    margin: 0 auto;
    padding: 0 0 48px 0;
}

您需要将.block1宽度设置为100％，并将其上方的元素设置为<body>，并将position:absolute从#aboutBlock移开。然后，您需要设置宽度应为950px的元素的宽度。

但是像Huangism说的那样，我可能会以不同的方式构建html。

Answer 2

使用position: absolute时，元素将从文档的布局中删除（页面上的其他内容忽略它在那里，只是在它后面/上面）。看起来你的问题是你的“block1”div只设置为某个宽度而你的“aboutBlock”就在那个“block1”里面。要解决此问题，您必须使“block1”成为页面的整个宽度，并使所有其他部分具有特定宽度（看起来像950px）和居中（带margin: 0 auto）或执行以下操作：

.aboutBlock {
    float: left;
    width: 100%;
}
.block1 {
    overflow: visible;
}

并添加一个：

<div style="clear: both; height: 0">&nbsp;</div>

在“aboutBlock”下面。

将div块设置为100％的正文

2 个答案: