jquery - 内部带有 img 的自动 Div 宽度

Question

按如下方式设置自定义图像 slider ；

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 正在按预期工作，点击一个按钮， slider 就会滑过，更多图像出现然后显示在 View 中。但是，现在正在动态添加图像，并且每个图像的宽度都不相同。所以我想根据图像在 CSS 中的宽度自动设置 #containerDiv 宽度。我尝试将 float: left 和 display: inline-block 设置为 .sliderImage 我还尝试设置 white -space: nowrap; 在 #containerDiv 上。似乎没有任何效果。当所有图像都需要位于同一行时，所有图像都会被向下推到下一行，然后它们将被溢出设置隐藏。有没有不用 JavaScript 或 jQuery 的方法？

编辑: 我取出了溢出:隐藏在这个 jsfiddle 上，所以你可以看到它是如何包装的。 http://jsfiddle.net/ut3o3pg3/

Answer 1

是的，添加 containerdiv img{ inside block add the width and height if the image} 这应该给它一个固定的大小，如果图像的宽度和高度小于 div 中的属性，图像将被拉伸(stretch)如果图像变大，图像将被缩小。