如何在浮动的固定图像周围换行？
[英]How to wrap text around floating, fixed image?
问题描述
I've got an image that floats in the bottom right corner (to put in the button, the position has to be fixed). 
我有一个漂浮在右下角的图像（要放置在按钮中，位置必须固定）。 However, part of the text on my page disappears behind the image. 但是，页面上的部分文本消失在图像后面。 Is it possible to make this text wrap around my image? 是否可以使此文字环绕我的图像？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<img src='http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png'
style='float:right;
position: fixed;
right:50px;
bottom:50px;
width:20%'>
Text is placed here
</body>
</html>
You can see the problem in action on this example page . 您可以在此示例页面上看到问题所在。
3 个解决方案
解决方案1
1 已采纳 2013-10-04 13:40:13
No, not in CSS alone. 不，不是仅在CSS中。
The fact that the image is floated doesn't help here, because it is also fixed. 图像浮动的事实在这里无济于事，因为它也是固定的。 Therefor it is not part of the flow anymore and the text doesn't respond to it. 因此，它不再是流程的一部分，并且文本也没有对此做出响应。
This cannot be fixed by CSS alone. 仅靠CSS无法解决此问题。 You could fix it using Javascript by moving the image around as you scroll, but it will be hard to get right and it will seriously slow down scrolling through your page, since the text will have to be re-aligned after each movement. 您可以使用Javascript来解决此问题，方法是在滚动时移动图像，但是这样做很难，并且会严重减慢滚动页面的速度，因为每次移动之后都必须重新对齐文本。
I think you'd better look out for a different solution. 我认为您最好寻找其他解决方案。
解决方案2
1 2013-10-04 13:40:30
when you use a position fixed or absolute (float here is irrelevant for your style, you could remove it) you're removing an element from its natural flow. 当您使用固定或绝对位置（此处的浮动与您的样式无关，可以将其删除）时，您将从其自然流动中删除元素。 Thus, given this position, the text is not able to detect the image and to re-arrange itself around it. 因此，在给定该位置的情况下，文本将无法检测到图像并无法在图像周围重新排列。
解决方案3
-2 2013-10-07 06:00:38
Using Z-index property you can do this.. 使用Z-index属性，您可以执行此操作。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<img src='http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png'
style='float:right;
position: fixed;
z-index:-100;
right:50px;
bottom:50px;
width:20%'>
<p style="z-index:12000">
Text is placed here</p>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.