html - 如何将图像从具有绝对位置的容器中拉出但保持在文档流中？

Question

我有一个 500 像素宽并向右浮动的内容容器。该容器包含文本，然后是图像，然后是更多文本。最后，我想将此图像从边界 500px 容器中拉出，并让它跨越页面的整个宽度，为了参数的缘故，它是 1000px 宽。实际上，图像将是全宽的(1000 像素宽)，而内容容器只有 500 像素宽。执行此类操作以使图像可以全宽显示的最佳方法是什么？

jsfiddle.net/QCb3R/

我想拉动图像以完全扩展到 .content div 之外。

<div class="container">

  <div class="content">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>

    <img src="http://lorempixel.com/500/300/" />

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>

  </div>

</div>

还有 CSS:

.container {
    width: 1000px;
    background-color: #eee;
}
.content {
    width: 500px;
    float: right;
}

Answer 1

创建这种效果非常容易，但不是通过将图像设置为绝对定位。

这是一个 jsFiddle

.container {
    width: 1000px;
    background-color: #eee;
}
p {
    width: 500px;
    float: right;
}
.content {
    width: 1000px;
    float: right;
}

将图像设置为绝对定位的问题正是因为它使图像脱离了正常的文档流。您必须用相同高度的占位符元素填充原始图像留下的空隙，然后将绝对定位的图像放置在占位符元素的顶部。这听起来像是 JavaScript 的工作，因为它需要访问 DOM 才能检索元素在页面上的位置，而仅使用 CSS 和 HTML 无法做到这一点。