获取浮动元素兄弟的最小内部宽度

Question

试图在这里解决一个非常棘手的问题。希望你们能帮忙。

情况如下：我们有一个浮动图片和一个相邻的P元素，它显然与左边对齐。问题是，从位置的角度来看，元素仍然占据整个宽度。这对于图像之后的部分是有意义的，但对于文本“但我必须解释......”而言并不是很重要。

这是一张说明问题的图片： http://postimg.org/image/65r9v8qyz/

现在技巧问题：有没有办法获得元素开头的innerWidth？ boundingClientRect和getComputedStyle对我不起作用。

有什么建议吗？

Answer 1

如果元素正在浮动，它将显示在另一个元素之上或之下。您无法直接获取innerWidth。

你可以做的是取P（段落）的innerWidth，然后减去图像的innerWidth（以及任何可能添加到图像元素的填充/边距/边框/其他）宽度）。这应该给你一些合理准确的东西，虽然难以管理和处理。

代码示例：

window.addEventListener('load', function() {
    var imageElement = document.getElementById('IMAGE_ID_HERE');
    var paragraphElement = document.getElementById('P_ID_HERE');

    var topWidth = paragraphElement.innerWidth - (imageElement.innerWidth /* Add any padding, etc. to this */);
});