Wie man eine Reihe von Bildern über die Breite von Container div hinaus?

Question

Ich habe eine Reihe von Bildern, die ich möchte nebeneinander ausgerichtet sein und über die Breite des Containers Div erstrecken. Die Bilder werden dynamisch hinzugefügt, so dass die Breite jedes Bildes unbekannt ist. Der äußere DIV hätte eine Breite von etwas speziellem, d. H. 790 px, und die Breite des inneren DIV sollte mit der Breite seines Inhalts übereinstimmen. Wie würde ich das machen?

Hier ist ein bisschen eine schnelle Skizze:

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

Hier ist der Code:

<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

Wenn Sie nichts dagegen haben, die float:left Eigenschaft loszuwerden, testete ich den folgenden Code in Chrome und es scheint, um Ihre Anforderung zu entsprechen:

<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> 

Eigenschaften, die keinen inden haben wird ergänzt durch mich.

Ich habe die width des Containers ein wenig geändert, um meinem Bildschirm zu entsprechen, und div{display:inline-block;width:200px;} verwendet, um die Imgs zu simulieren, aber ich denke, das sollte auf echten Bildern funktionieren.

Answer 2

ich diesen Code hinzugefügt und es scheint zu funktionieren, aber gibt es einen besseren Weg?

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