在保持元素在正常文档流中的同时具有绝对定位的技术？

Question

我们有一个响应式布局，其中一些内容具有最大宽度(用于行长度可读性)，图像、滑块和图库等元素需要突破并变为全宽，如下所示：http://jsfiddle.net/Rruxf/9/

显然，position:absolute;实现了这一点，但是从正常的文档流中删除了该项，这是不起作用的。

我们的变通方法是在每个.full div之后都有单独的.page div，但这对客户端来说很快就会变得痛苦。

我们发现的答案要么不适用于这个特定的用例，要么受到浏览器版本的限制。

这个站点是IE9+的，所以我们想知道是否有什么新的东西(flexbox等)可以实现这种布局？

干杯

Answer 1

我不清楚为什么你需要让任何东西绝对定位。你能不能只设置交替的div：

<div class="page">
   ...text content ....
</div>
<div class="full">
   ...image ....
</div>
<div class="page">
   ...text content ....
</div>

或者，您可以在p标记上设置max-width。

.page p {max-width: 600px;} 

如果你需要.page div来做一些泛型的事情，我可能会倾向于这样做：

<style>
    .page {width: 100%;}
    .text-column {max-width: 600px; margin: 0 auto;}
</style>

<div class="page">
    <div class="text-column"><p>...text content...</p></div>
    <img src="url">
    <div class="text-column"><p>...text content...</p></div>
</div><!-- end of page -->