javascript - jQuery:实际的div宽度

Question

我有两个 <div> ，一个嵌套到另一个定义如下:

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

CSS:

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

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

因为我不知道.content的内容(也不可预测)，我需要知道它的真实宽度(由内容定义)，但两者都是 .width()和 .innerWidth()给我相同的结果，第一次调用时是 660(比如 container div)，当我通过设置负的 margin-left(x 是左移集)滚动它后调用它时给我 660 + x带边距)。

如何获取元素的真实的、依赖于内容的宽度？谢谢

Answer 1

默认情况下，div 在其父级中占据全宽，因此宽度将始终是父级的宽度。

如果你不想那样，你可以使用

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

或者可能

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

关于将 #div.content 元素分别变成内联或 float 元素，它只占用它需要的空间(即不一定是父级提供的所有空间)。所以这应该有效!