孩子在不打破流动的情况下采取全身的身体

Question

我需要孩子的CSS，它采用全身宽度，但不会突破流程（不使用Javascript）。我已经尝试过了：

position: absolute;
left: 0;
width: 100%;

但这会让孩子摆脱困境。以下是一个示例：http://jsfiddle.net/v5Mq4/ 绝对定位的孩子的身高是可变的。因此，保证金底部或保证金顶部不适用。

Answer 1

绝对定位会从文档流中删除元素。

您可以按照自己的意愿行事，但是您必须通过创建相同大小的差距来填写您的布局。您可以通过在上一个元素中添加margin-bottom来实现此目的。

Answer 2

你可以通过混合使用相对和绝对div来实现这一点。

CSS类

.relative {
  position: relative;
  width: 200px;
  height: 400px;
  background-color: red;
}
.absolute {
  position: absolute;
  top: 120px;
  left: -100px;
  width: 200%;
  height: 200px;
    background-color: black;
}

和DIVS

<div width='100%' align='center'>
    <div class='relative'>
        <div class='absolute'>
        </div>
    </div>
</div>

另外，您需要另一个父容器（或主体）来对齐所包含的元素。

这是一个解决方案的jsFiddle。

http://jsfiddle.net/mgleeson/35vDd/

干杯。