3

可能最容易用图像解释我所追求的：

在此处输入图像描述

当我浮动图像时，文本会围绕它运行，这很棒。但是，根据文本的数量和图像的大小，我经常会留下这些尴尬的部分。在这种情况下，笨拙的文本在图像旁边的列中看起来会更好。

我可以为图像添加更多的底部边距，具体取决于有多少尴尬的文本，但在响应式设计中，图像会缩小并且文本保持相同的大小，因此无法在每个断点处对每个图像执行此操作。

我可以在所有段落上使用“overflow:auto”，以便它创建一个新的布局上下文并阻止文本完全换行。但是我希望文本在有足够文本时浮动，并且我无法控制最终输出。

我有一种感觉，除非有一些过于复杂的 JS 可以在上面运行（并且可以处理响应式站点上的屏幕尺寸变化），否则没有解决方案。所以我的问题是人们如何处理这个问题？忽略它？使用 JS？

谢谢

4

2 回答 2

3

我不认为你可以在 CSS 中做到这一点。但是，我也不认为 JavaScript 会过于复杂。我建议使用element.getClientRects()，它返回一个 TextRectangle 对象列表。对于内联元素，每个 TextRectangle 对象代表一行文本。

如果您检查最后一个 TextRectangle 的左偏移量与倒数第二个 TextRectangle 的左偏移量是否不同，您就知道最后一行是“落后者”，并且可以将图像的底部边距调整一个 TextRectangle ( bottom - top) 的高度。

getClientRects在 CSSOM 中已标准化，但在某些浏览器中可能有错误的实现。

从更个人的角度来看，我会说我认为它看起来很好，如果我是你，我可能不会担心。

于 2013-02-11T11:30:36.430 回答
0

最简单的解决方法是在您的文本周围添加另一个 DIV 并将其浮动。

所以你的html最终会像：

<div>
    <img src="">
    <div>
        My text...
    </div>
</div>
于 2013-02-11T11:15:17.457 回答