即使使用绝对位置[CSS] [重复]，如何换行文本

Question

我的网站有一个小问题。正如您在图片上看到的（这只是一个示例），我有一个图像，它在容器的底部对齐，周围有文字。真实的图片很大，所以我想让文字浮动，但同时它应该与容器的右下角对齐。当我使用绝对位置时，图像将与文本重叠。我该如何解决？即使内容长度不同，这也是可能的。因此，无论内容有多长，我都希望我的图片始终位于右下角，并在其周围环绕着文字。

这就是它目前的样子（非常简化 - 你可以在图片 1 中看到它）。

    <div style="position: relative;"><img src="img/facebook.jpg" style="position: absolute; bottom: 0; right: 0;">
TEXT
</div>

如果我这样做，它可以与包装一起使用，但图像总是在顶部。

<div><img src="img/facebook.jpg" style="float: right">
  TEXT
 </div>

如果我这样做，它可以与包装一起使用，并且图像位于页面底部，但图像始终位于整个内容下方而不是旁边。

<div>
  TEXT
<img src="img/facebook.jpg" style="float: right">
 </div>

非常感谢您的帮助

Answer 1

试试这个

img {
  float:right;  
  clear:both;
  width: 50% ;
  margin: 30px -50px 10px 10px ;
}
.rightimage:before {
  content: '' ;
  display:block;
  float: right;
  height: 200px;
}

https://codepen.io/atomworks/pen/algcz

https://stackoverflow.com/questions/1915831/text-wrapping-around-an-absolute-positioned-div#:~:text=HTML,-%3Cdiv%20id%3D%22&text=Absolute%20positioning%20does%20not%20let,position%20using%20margin%20or%20padding.