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);
});

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

2 个答案: