计算浮动元素的宽度

Calculating width of a floating element

本文关键字：元素 计算      更新时间：2023-09-26

你可以在维基百科中看到：http://en.wikipedia.org/wiki/United_States第二个部分以"在 379 万平方英里"开始。如果你检查这个法拉图的宽度，它将为您提供完整的宽度，包括浮动右侧元素".infobox"的宽度http://imageshack.us/photo/my-images/38/54351130.jpg/

但是我需要向用户显示法拉图的确切宽度（即法币图宽度 - 信息框等）。但是，假设我不知道有一个浮动元素，并且我希望javascript计算出连接的确切显示宽度。谢谢。

编辑：下面是该问题的示例：http://jsfiddle.net/guy_l/sj3Zp/2/滚动浏览 DOM，我得到相同的结果，但计算的 witdh 是不同的。

以下是使用jQuery解决方案的场景，它工作正常：

<script>
    // with all margins and paddings
    var w1  = $('.c_2').outerWidth(true);
    var w2  = $('.c_3').width();
    alert ('Calculated width: ' + w2 + ' - ' + w1 + ' = ' + ( w2-w1) );
</script>
<style>
    .c_1 {
        border:         1px solid red;
    }
    .c_2 {
        float:          right;
        width:          22em;
        height:         200px;
        margin:         0px 20px;
        padding:        0px 20px;
        border:         1p solid orange;
    }
    .c_3 {
        border:         1px solid blue;
    }
</style>
<div class="c_1">
    <div class="c_2">
        Infopanel
    </div>
    <p>
        Some paragraph
    </p>
    <p class="c_3">
        The interesting paragraph
    </p>
</div>
相关文章：