Css 在图像周围用边距环绕文本

有没有一种方法可以用float：right在图像周围用边框和边距将文本包装在div中？ 到目前为止，我所能做的最好的事情就是让文本正确地环绕在图像周围，但边框最终位于图像后面

编辑

下面是我能够得到的屏幕截图，看起来像：

正如您所看到的，当我试图让它在到达图像边界时停止时，边界会在图像后面结束

这方面的代码是：

<img src='images/mangos.jpeg' width='500px' style='float: right; border: 2px solid $theme; padding: 5px; margin: 0 5px 5px 5px;'>
<div style='font-size: 19px; white-space: pre-wrap; border: 2px solid #F6B616; padding: 5px; margin: 5px;'>
Text Here
</div>

编辑2

---

对不起，问题不是很清楚。我所追求的实际上是文本和图像边框之间的一个小间隙。文本及其边框需要环绕图像及其边框。有没有办法做到这一点？

你所看到的事实上是完全正常的。想象你的文本会比图像高，一个真正的换行将使文本在图像下方继续，而不仅仅是在图像左侧的一列中。这毕竟是浮动的全部目的，尽管它经常以各种方式被滥用。大概是这样的：

      +------+---+            +------+---+
      |text  |img|            |text  |img|
THIS: |text  +---+  NOT THIS: |text  +---+
      |text text |            |text  |
      +----------+            +------+

<img src='path/to/image'>
<p>Lorem ipsum...</p>


img {
    float: right;
    box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 7px #F6B616;
    margin: 7px 5px 5px 13px;
    width: 250px;
}
p {
    font-size: 19px;
    white-space: pre-wrap;
    border: 2px solid #F6B616;
    padding: 5px;
    margin: 5px;
}

假设您的背景是纯色，您的用例可以很容易地解决。您只需遮罩在图像后面看到的文本边框。大概是这样的：

      +------+---+            +------+---+
      |text  |img|            |text  |img|
THIS: |text  +---+  NOT THIS: |text  +---+
      |text text |            |text  |
      +----------+            +------+

<img src='path/to/image'>
<p>Lorem ipsum...</p>


img {
    float: right;
    box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 7px #F6B616;
    margin: 7px 5px 5px 13px;
    width: 250px;
}
p {
    font-size: 19px;
    white-space: pre-wrap;
    border: 2px solid #F6B616;
    padding: 5px;
    margin: 5px;
}

当我在图像中添加双框阴影时，它模仿了边距为5px的边框的效果。最大的区别是白色的阴影会遮住文本的底层边框，从而产生你想要的效果

---

还有其他一些技术，比如使用伪元素，在您有更复杂的背景时可能会很有用，但我个人认为这种方法最适合您的用例。

您的问题不清楚。试着给我们展示一幅关于你想要实现什么以及你迄今为止做了什么的图片？发布你迄今为止所做的代码，并添加一幅图片来解释你需要什么。这太难理解了。请尝试将右边距设置为等于或大于该图像固定为500px宽度的文本除数上的图像宽度。是否始终？请将代码/小提琴放在右边