html - 如何使一组图像超出容器 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 但我认为这应该适用于真实图像。