Question

你可以在维基百科看到这里： 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我得到的结果相同，但计算得出的结果不同。

Answer 1

以下是使用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>

计算浮动元素的宽度

1 个答案: