jQuery：实际的div宽度 [英] jQuery: actual div width

问题描述

我有两个< div> ，其中一个嵌套到另一个定义中，如下所示：

 < div class =wrapper> 
< div class =content> 
 [..]内容[..] 
< / div> 
< / div> 
  

css：

 ＃div.wrapper 
 {
 width：660px; 
 overflow：hidden; 
 float：left; 
} 
＃div.content 
 {
 white-space：nowrap; 
} 
  

效果是我想要的，内容在内部水平放置，但是当它超过时隐藏（我然后用jQuery滚动它）。

因为我不知道 .content （也不是可预测的），我需要知道它的实际宽度（由内容定义），但都是 .width（）和 .innerWidth（）给我的结果相同，当第一次调用时（比如 container div）和660 + x我通过设置一个负边距左移（x是带有边距的左移位）来调用它。

如何获得真实的，与内容相关的宽度的元素？谢谢

解决方案

默认情况下，Divs在其父项中取得全宽，因此宽度将始终为父项的宽度。 >

如果你不想要的话，你可以使用

  #div。内容
 {
 white-space：nowrap; 
 display：inline-block; 
} 
  

或可能

 ＃div.content 
 {
 white-space：nowrap; 
 float：left; 
} 
  

转为＃div.content 元素分别放入一个内联或浮动元素，它只占用足够的空间（即不一定是父级提供的所有空间）。所以这应该工作！

I have two <div>, one nested into the other defined like this:

<div class="wrapper">
    <div class="content">
        [..] Content [..]
    </div>
</div>

The css:

#div.wrapper
{            
    width: 660px;
    overflow: hidden;
    float: left;
}
#div.content
{
    white-space: nowrap;
}

The effect is what i want, the content lays down horizontally within the inner but is hidden when it exceeds, (i then scroll it with jQuery).

Since I don't know the content of .content (nor it is predictable), I need to know the real width of it (defined by the content), but both .width() and .innerWidth() give me the same result that is 660 when first called (like the container div) and 660 + x when I call it after having scrolled it by setting a negative margin-left (x is the left shift set with the margin).

How to get the real, content dependent width of the element? Thanks

解决方案

Divs by default take full width in their parent, so width will always be the width of the parent.

If you don't want that, you would use

#div.content
{
    white-space: nowrap;
    display: inline-block;
}

or possibly

#div.content
{
    white-space: nowrap;
    float: left;
}

as to turn the #div.content element into an inline or float element respectively, which only takes up as much space as it needs (i.e. not necessarily all the space that the parent provides). So that should work!

这篇关于jQuery：实际的div宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！