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标签上设置最大宽度。

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

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

1 个答案: