如何将图像从位置绝对位置移出容器但保留在文档流中？

Question

我有一个500px宽的内容容器并向右浮动。此容器包含文本，然后是图像，然后是一些文本。最后，我想将这个图像从边界的500px容器中拉出来，让它跨越页面的整个宽度，为了论证，它是1000px宽。实际上，图像将是全宽（1000px宽），而内容容器只有500px宽。做这样的事情的最佳方法是什么，以便图像可以达到全宽？

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来完成。