1

我有一个 500px 宽并向右浮动的内容容器。此容器包含文本，然后是图像，然后是更多文本。最终，我想将此图像拉出边界 500 像素的容器，并让它跨越页面的整个宽度，为了论证，它是 1000 像素宽。实际上，图像将是全角的（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;
}
4

1 回答 1

1

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

这是一个jsFiddle

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

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

于 2013-05-02T04:14:13.613 回答