绝对定位的图像div溢出内容到它的左边

Question

这是小提琴：http://jsfiddle.net/uyU5L/3/

我有一个容器（原始大小是940px）div包含在体内。

<div class="wrapper">
<div class="container">

    <div class="div-content">
    </div>

</div>
 <div class="image-content">
           <img src=""/>
     </div>
</div>

我的问题是我需要将图像div包含在窗口的一侧。绝对正确的身体。

当你调整大小时，你会看到图像覆盖内容。我希望图像将内容div考虑在内并将文本向左推，而不是重复它。我是以错误的方式解决这个问题吗？

Answer 1

试试这个：http://jsfiddle.net/myajouri/uyU5L/5/

.container {
    max-width: 340px;
    margin: 0 auto;
    position: relative;
    padding: 0 100px;
}
.div-content {
    padding: 40px 15px;
    background: #ccc;
}
.image-content {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.image-content img {
    width: 100px;
    height: 100%;
}

Answer 2

您可以使用CSS媒体查询：

@media screen and (max-width: 560px) {
    .container {
        margin: 0 100px 0 auto;
    }
}

小提琴：http://jsfiddle.net/yKQFG/

Answer 3

1. 使用两个div一个（让我们称之为“content-wrapper”）来保存内容，另一个（图像包装）用于保存图像div
2. 第一次放置浮动：左边，第二次浮动：右边
3. 为两者提供适当的宽度
4. 你做完了