文章/答案/技术大牛

发布

社区首页 >问答首页 >当宽度超过最大宽度时，如何使图像从div中移出？

问当宽度超过最大宽度时，如何使图像从div中移出？
EN

Stack Overflow用户

提问于 2012-01-24 04:03:23

回答 2查看 881关注 0票数 0

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

有没有可能在没有javascript的情况下，用纯css来做这件事？

这就是我希望在普通屏幕和宽屏上看到的效果：

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

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

css

image

css-float

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-01-24 04:10:06

使用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.

票数 1

Stack Overflow用户

发布于 2012-01-24 04:07:35

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

您不应该让div中img出现在div之外。图像应该是div的兄弟，而不是孩子。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8977837

复制

相似问题

问当宽度超过最大宽度时，如何使图像从div中移出？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当宽度超过最大宽度时，如何使图像从div中移出？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当宽度超过最大宽度时，如何使图像从div中移出？
EN