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

没有缩进的属性是我添加的。

我稍微更改了容器的宽度以匹配我的屏幕，并使用 div{display:inline-block;width:200px;} 来模拟图像，但我认为这应该适用于真实图像。

Answer 2

我添加了这段代码，它似乎可以工作，但是有更好的方法吗？

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