使用图片

Question

有没有办法在带有边框和边距的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

你所看到的事实上是完全正常的。想象一下，你的文字会比图像更高，一个真正的包裹会使文本在图像下面继续进行，而不仅仅是在图像左边的一列中。毕竟这是浮动的全部目的（虽然它经常以各种方式滥用）。像这样：

      +------+---+            +------+---+
      |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，我为图像添加了一个双框阴影，模仿边框效果为5px。最大的区别是白色形状，这个阴影将掩盖文本的底层边界，从而产生你所追求的效果。

还有其他技术，比如使用伪元素（如果你有更复杂的背景，这可能很有用），但我个人认为这种方法最容易用于你的用例。