如何使一组图像超出容器 div 的宽度？答案

【问题标题】：How to make a set of images extend beyond width of container div?如何使一组图像超出容器 div 的宽度？
【发布时间】：2011-06-06 21:44:06
【问题描述】：

我有一组图像，我想将它们并排对齐并超出容器 div 的宽度。图像是动态添加的，因此每个图像的宽度是未知的。外部 DIV 将具有特定的宽度，即 790 像素，内部 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>

【问题讨论】：

如果这需要 javascript 甚至 jQuery 来完成，那很好。

标签： html css dynamic width

【解决方案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，但我认为这应该适用于真实图像。

【讨论】：

【解决方案2】：

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

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

【讨论】：