イメージのセットを作成するには、コンテナdivの幅を超えて拡張する必要がありますか？

Question

私は画像のセットを、隣り合わせに並べて、コンテナdivの幅を超えて配置したいと思っています。画像は動的に追加され、各画像の幅は不明である。外側のDIVの幅は特定の790pxの幅を持ち、内側のDIVの幅はその内容の幅と一致する必要があります。これをどうやってやりますか？ここで

クイックスケッチのビットです：

+---------------------------------+ 
|-+---+------+--+-----+----+------| 
| | |  | |  | |  | 
| | |  | |  | |  | 
| | |  | |  | |  | 
| | |  | |  | |  | 
|-+---+------+--+-----+----+------| 
+---------------------------------+ 
|< |||||||||     >| 
+---------------------------------+ 

ここでコードは次のとおりです。

<style type="text/css"> 
<!-- 
#sortableContainer { 
    width: 790px; 
    overflow: scroll; 
    height:auto; 
} 
#sortableScroller { 
    width: auto; 
} 
.sortableItem { 
    float: left; 
    height: 460px; 
    padding: 0; 
    margin: 0; 
} 
--> 
</style> 
<div id="sortableContainer"> 
    <div id="sortableScroller"> 
     <img src='<url>' class='sortableItem' /> 
     <img src='<url>' class='sortableItem' /> 
     <img src='<url>' class='sortableItem' /> 
     <img src='<url>' class='sortableItem' /> 
     <img src='<url>' class='sortableItem' /> 
     <img src='<url>' class='sortableItem' /> 
     <img src='<url>' class='sortableItem' /> 
     <img src='<url>' class='sortableItem' /> 
     <img src='<url>' class='sortableItem' /> 
     <img src='<url>' class='sortableItem' /> 
    </div> 
</div> 

Answer 1

、私はChromeで次のコードをテストし、あなたの条件に合わせているようだ：何のインデントを持っていない

<style type="text/css"> 
<!-- 
#sortableContainer { 
    width: 590px; 
    overflow: scroll; 
    height:auto; 
} 
#sortableScroller { 
    width: auto; 
white-space:nowrap; 
} 
.sortableItem { 
/* float:left;*/ 
    height: 460px; 
    padding: 0; 
    margin: 0; 
background-color:black; 
width:200px; 
display:inline-block; 
} 
--> 
</style> 
<div id="sortableContainer"> 
    <div id="sortableScroller"> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
     <div class="sortableItem"></div> 
    </div> 
</div> 

プロパティをによって追加さ私。

コンテナのwidthを私の画面に合わせて少し変更し、div{display:inline-block;width:200px;}を使ってimgsをシミュレートしましたが、これは実際のイメージでは機能するはずです。

Answer 2

私はこのコードを追加し、それが動作しているようですが、良い方法はありますか？あなたはfloat:left財産を取り除く気にしない場合は

$(window).load(function() { 
    var accum_width = 0; 
    $('.sortableItem').each(function() { 
     accum_width += $(this).width(); 
    }); 
    $('#sortableScroller').width(accum_width); 
});