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的内容（也不是可预测的），我需要知道它的真实宽度（由内容定义），但两者都是{ {1}}和.width()给我的结果与首次调用时的660相同（如容器 div）和660 + x，当我通过设置负数滚动它后调用它margin-left（x是带有边距的左移）。

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

Answer 1

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

如果您不想要，请使用

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

或可能

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

分别将#div.content元素转换为内联元素或浮点元素，只占用所需的空间（即不一定是父元素提供的所有空间）。这应该有用！

Answer 2

我不确定您使用#div.*的原因，因为这意味着您有一个ID为div的元素。如果您要指定具有特定类的div，请使用div.class-name。由于div作为子节点驻留在另一个div中，因此它采用其父节点的宽度。将浮动设置为左允许它超出此限制。

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

滚动示例：http://jsfiddle.net/9E8G7/6/

这是我写的一个快速jQuery示例，可以改进我确定。它滚动直到它到达内容的末尾。

$(document).ready(function(){
    var content = $('.content');
    var margin = 0;
    var scrollFunc = function() {
        margin--;
        content.css('margin-left', margin);
        var diff = content.width() - $('.wrapper').width();
        if (margin > -diff) {
            var scroll = setTimeout(scrollFunc, 10);
        }
    };
    scrollFunc();
});

Answer 3

您尝试过：jQuery.outerWidth()，我的意思是$(yourelement).outerWidth()？

Answer 4

您是否尝试过element.offsetWidth？

jQuery：实际的div宽度

4 个答案: