jQueryの：実際のdivの幅

Question

私は2 <div>、1を持っている。このように定義されている他にネストされた：

<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()は私に同じ結果が得られています負のマージン左（xはマージンを持つ左シフトセット）を設定してスクロールした後、最初に呼び出されたとき（最初はコンテナ div）、660 + xが呼び出されたときに660です。

要素の実際の内容に依存する幅を取得するにはどうすればよいですか？ありがとう

Answer 1

Divはデフォルトで親で全幅をとります。したがって、幅は常に親の幅になります。あなたはそれをしたくない場合は、インラインに#div.content要素をオンまたは専用として取り、それぞれの要素を、フロートするよう

、あなたは

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

または多分

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

使用します必要なだけのスペース（親が提供するすべてのスペースである必要はありません）。それはうまくいくはずです！

Answer 2

element.offsetWidthを試しましたか？

Answer 3

なぜ#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 4

あなたがしようとしました：jQuery.outerWidth()が、私は$(yourelement).outerWidth()を意味ですか？