如何使一组图像超出容器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

如果你不介意摆脱float:left财产，我测试了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

我加入这个代码，它似乎工作，但有没有更好的办法？

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