当宽度超过最大宽度时，如何使图像离开 div？答案

【问题标题】：How to make images to go out of the div when width is over the max-width?当宽度超过最大宽度时，如何使图像离开 div？
【发布时间】：2012-01-24 04:22:10
【问题描述】：

我有一个页面，里面有文本和图像，样式为 float:right。我想为文本设置最大宽度，但让图像超出文本。

是否可以使用纯 css 而不用 javascript 来做到这一点？

这就是我希望在普通屏幕和宽屏幕上看到它的方式：

+----------------------+    +-------------------+--------------+
|                      |    |                   |              |
|  TEXT         TEXT   |    |                   |              |
|              +-------+    |                   |   +-------+  |
|              |       |    |                   |   |       |  |
|              |  IMG  |    |     TEXT          |   |  IMG  |  |
|              |       |    |                   |   |       |  |
|              +-------+    |                   |   +-------+  |
|                      |    |                   |              |
|  TEXT         TEXT   |    |                   |              |
|                      |    |     TEXT          |  BACKGROUND  |
|                      |    |                   |              |
|              +-------+    |                   |   +-------+  |
|              |       |    |                   |   |       |  |
|              |  IMG  |    |                   |   |  IMG  |  |
|              |       |    |     TEXT          |   |       |  |
|              +-------+    |                   |   +-------+  |
|                      |    |                   |              |
|  TEXT         TEXT   |    |                   |              |
|                      |    |                   |              |
+----------------------+    +-------------------+--------------+

                            <-----MAX-WIDTH----->

【问题讨论】：

现在没有什么特别的了。就像<div class="text"> Some text <img src="..." style="float:right"> Some more text </div>

标签： css image css-float

【解决方案1】：

使用 CSS3 media queries:

@media screen and (min-width: 600px) {
     .aClass {}
     .anotherClass {}
     /* properties in here only apply when the viewport is wider than 600px */
}

使用此方法，您可以默认让文本在图像周围流动，但如果视口较宽，则您会覆盖该 CSS 并使用负边距或绝对定位将图像放置在容器 div 之外。

More about responsive web design with CSS.

【讨论】：

好的，我会尝试为普通屏幕制作浮动，为宽屏制作相对。谢谢！

【解决方案2】：

style="position:absolute;right:100px;" 可能会给你你想要的。请注意，如果您有position:absolute，则可能不需要指定float:right。

您不应该让 div 内的 img 出现在该 div 之外。图片应该是 div 的兄弟姐妹而不是孩子。

【讨论】：

我认为如果你有 position:absolute，一些文字会隐藏在图片下面。