javascript - 获取 float 元素兄弟的最小 innerWidth

Question

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

情况如下:我们有一个 float 的图片，和一个相邻的 P 元素，它显然是向左对齐的。问题是，从位置的 Angular 来看，元素仍然占据了整个宽度。这对于图像后面的部分有意义，但对于最上面的文本“但我必须解释......”来说意义不大。

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

现在的技巧问题:有什么方法可以获取元素开头的 innerWidth 吗？ boundingClientRect 和 getComputedStyle 对我不起作用。

有什么建议吗？

Answer 1

如果元素处于 float 状态，它将显示在另一个元素的上方或下方。您将无法直接获取 innerWidth。

您可以做的是获取 P(段落)的内部宽度，然后从中减去图像的内部宽度(以及可能添加到图像元素宽度的任何填充/边距/边框/其他)。这应该会给你一些相当准确的东西，尽管管理和处理起来很棘手。

代码示例:

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 */);
});