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

Question

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

显然position:absolute;实现了这一点，但从正常的文档流中删除了无法工作的项。

我们的解决方案是在每个。fulldiv之后都有单独的。pagediv，但这对客户端来说很快就会变得痛苦。

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

这个网站是IE9+，所以我们想知道是否有什么新的(flexbox等)，可能实现这种类型的布局?

欢呼

Answer 1

我不清楚为什么你需要做任何绝对定位。

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

或者，您可以在p标记上设置最大宽度。

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

我可能倾向于这样做，如果你需要一些通用的。pagediv:

<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 -->