计算浮动元素的宽度

你可以在这里看到例如在维基百科： http://en.wikipedia.org/wiki/United_States 第二部分开始于“在379万平方英里”。如果选中此pharagraph的宽度，它会给你的整个宽度，包括浮动权元素“.infobox” http://imageshack.us/photo/my-images/38/54351130.jpg/计算浮动元素的宽度

的宽度，但我需要显示给用户的pharagraph的精确宽度（这是段宽 - 信息框等）。但是，假设我不知道有一个浮动元素，我想JavaScript来计算确切的显示宽度的竞争。谢谢。

编辑：下面是一个例子的问题： http://jsfiddle.net/guy_l/sj3Zp/2/ 通过DOM滚动我得到不过相同的结果计算witdh是不同的。

来源

2012-06-24 Guy L.

这里是一个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>

来源

2012-06-24 09:59:04 insertusernamehere

如果我每个有我的内容里面浮动DIV时间知道这会工作。我的问题是我不知道。我只是循环遍历段落，并使用$（）。width（）etc'来定位它们的宽度，这给了段落的宽度，但不会显示给用户的宽度（因为我们有一个浮动元素打破了计算样式的宽度）。 –

如果您不确定，是否有浮动元素，您可以选择父项，选择所有元素，具有浮动项，计算它们在父项内的位置，查找，段落是否受到浮动元素，并从段落宽度中减去它。这可能会变得非常棘手，如果你查找“**大西洋海岸沿海平原让内陆更远**”，你也会看到，这段文字实际上有2个宽度，因为它是在漂浮的容器。 – insertusernamehere

我想这是唯一的解决方案。谢谢。奇怪的是，我们无法得到段落的实际“计算”宽度。 –

计算浮动元素的宽度

回答

相关问题