如何使一組圖像超出容器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;}模擬img，但是我認為這應該適用於真實圖像。

Answer 2

我添加了這段代碼，它似乎可以正常工作，但是有更好的方法嗎？

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