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

Question

有没有办法用 float: 对图像周围带有边框和边距的 div 中包装文本？
到目前为止，我能做的最好的事情就是让文本正确环绕图像，但边框最终位于图像后面。

编辑

这是我能够得到的截图: http://www.tiikoni.com/tis/view/?id=6753a19

如您所见，当我试图让它到达图像边界时停止时，边界最终位于图像后面。

代码是:

<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

抱歉，问题不是很清楚。我所追求的实际上是文本和图像边框之间的一个小间隙。文本及其边框需要环绕图像及其边框。有什么办法可以实现吗？

Answer 1

您所看到的实际上是完全正常的。想象一下你的文本会变得比图像高，真正的换行会使文本在图像下方继续，而不仅仅是在图像左侧的单个列中。毕竟这就是 float 的全部目的(尽管它经常以各种方式被滥用)。像这样:

      +------+---+            +------+---+
      |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;
}

作为you can see我在图像中添加了一个双框阴影，模仿了 5 像素边距的边框效果。最大的区别是这个阴影的白色形式会掩盖文本的底层边框，从而产生您想要的效果。

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