获取浮动元素兄弟的最小 innerWidth

Question

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

情况如下：我们有一张浮动的图片，和一个相邻的P元素，它显然是向左对齐的。问题是，从位置的角度来看，元素仍然占据了整个宽度。这对于图像后面的部分有意义，但对于顶部的文本 "But I must explain..." 来说意义不大。

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

现在有技巧问题：有什么办法可以得到元素开头的innerWidth吗？ boundingClientRect 和 getComputedStyle 对我不起作用。

有什么建议吗？

Answer 1

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

您可以做的是获取 P（段落）的内部宽度，然后从中减去图像的内部宽度（以及可能增加图像元素宽度的任何 padding/margins/borders/other）。这应该会给你一些相当准确但难以管理和处理的东西。

代码示例：

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

获取浮动元素兄弟的最小 innerWidth

Get the minimum innerWidth of a floated element sibling

javascript

css

dom

css-float