带有img的自动Div宽度

Question

使用以下自定义图像滑块进行设置；

的HTML

<div id="frameDiv">
    <div id="containerDiv">
        <img class="sliderImage" />
        <img class="sliderImage" />
    </div>
</div>

的CSS

#frameDiv {
   height: 200px;
   width: 450px;
   overflow:hidden;
   white-space: normal;
}

#containerDiv {
   position: relative;
   height: 200px;
}

.sliderImage {
   max-height: 200px;
   min-height: 200px;
   min-width: 134px;
   margin-right: 7px;
   float:left;
}

我现在已使用jQuery设置了#containerDiv宽度，并且Slider可以按预期工作，单击按钮即可滑动滑块，然后在视图中显示更多图像。 但是，现在正在动态添加图像，并且每个图像宽度都不相同。 所以我想根据CSS图像的宽度自动设置#containerDiv宽度。 我试图将float: left和display: inline-block到.sliderImage我也试图设置white-space: nowrap; .sliderImage 在#containerDiv 。 似乎没有任何作用。 当所有图像需要全部位于同一行时，它们会彼此向下推到下一行，然后将使用溢出设置将其隐藏。 有没有JavaScript或jQuery吗？

编辑：我拿出了溢出：隐藏在这个jsfiddle上，所以您可以看到它是如何结束的。 http://jsfiddle.net/ut3o3pg3/

Answer 1

是的，可以在容器中添加containerdiv img {如果图像添加宽度和高度}，如果图像的宽度和高度小于div中的属性，并且图像的宽度和高度小于div的属性，则应该给定固定大小图像将缩小。

Answer 2

添加display: table; #containerDiv和#frameDiv以根据它们的内容动态增长它们。

添加white-space: nowrap; 到#containerDiv并display: inline-block; .sliderImage以强制图像以嵌入式方式显示。

在这里查看： jsFiddle