我有一个页面，其中包含文本和图像，样式为 float:right。 我想为文本设置最大宽度，但让图像超出文本范围。
是否可以使用纯 css 而不使用 javascript 来实现？
这就是我希望在普通屏幕和宽屏上看到它的方式:
+----------------------+ +-------------------+--------------+
| | | | |
| TEXT TEXT | | | |
| +-------+ | | +-------+ |
| | | | | | | |
| | IMG | | TEXT | | IMG | |
| | | | | | | |
| +-------+ | | +-------+ |
| | | | |
| TEXT TEXT | | | |
| | | TEXT | BACKGROUND |
| | | | |
| +-------+ | | +-------+ |
| | | | | | | |
| | IMG | | | | IMG | |
| | | | TEXT | | | |
| +-------+ | | +-------+ |
| | | | |
| TEXT TEXT | | | |
| | | | |
+----------------------+ +-------------------+--------------+
<-----MAX-WIDTH----->
最佳答案
使用 CSS3 media queries :
@media screen and (min-width: 600px) {
.aClass {}
.anotherClass {}
/* properties in here only apply when the viewport is wider than 600px */
}
使用这种方法，您可以让文本在默认情况下围绕图像流动，但如果视口(viewport)很宽，那么您可以覆盖该 CSS 并使用负边距或绝对定位将图像定位在容器 div 之外。
关于css - 当宽度超过最大宽度时，如何使图像走出div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8977837/