可能最容易用图像来解释我想要什么：
当我浮动图像时，文本围绕它运行，这很棒。但是，根据文本量和图像大小，我经常会遇到这些尴尬的情况。在这种情况下，尴尬的文本在图像旁边的列中看起来会更好。
I could根据有多少尴尬的文本为图像添加更多的底部边距，但在响应式设计中，图像会缩小并且文本保持相同的大小，因此无法在每个断点处为每个图像执行此操作。
I could在所有段落上使用“overflow:auto”，以便创建新的布局上下文并阻止文本完全换行。但我希望文本在有足够文本时浮动，并且我再次无法控制最终输出。
我有一种感觉，除非有一些过于复杂的 JS 可以在此运行（并且可以处理响应式网站上的屏幕尺寸变化），否则没有解决方案。所以我的问题是人们如何处理这个问题？忽略它？使用JS？
Thanks
我认为你不能在 CSS 中做到这一点。不过，我认为 JavaScript 也不会过于复杂。我建议使用element.getClientRects() https://developer.mozilla.org/en-US/docs/DOM/element.getClientRects，它返回 TextRectangle 对象的列表。对于内联元素，每个 TextRectangle 对象代表一行文本。
如果你检查最后一个 TextRectangle 的左偏移量与倒数第二个 TextRectangle 的左偏移量不同，你就知道最后一行是“落后者”，可以将图像的下边距调整一个 TextRectangle 的高度（bottom - top).
getClientRects在 CSSOM 中被标准化，但是可能有错误的实现 http://www.quirksmode.org/dom/w3c_cssom.html#t22在某些浏览器中。
从更个人的角度来看，我会说我认为它看起来很好，如果我是你，我可能不会担心。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
