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

我现在将#containerDiv宽度设置为jQuery，滑块正在按预期工作，只需单击滑块滑动的按钮，然后会在视图中显示更多图像。然而，现在动态添加图像并且每个图像宽度不相同。因此，我希望根据#containerDiv中图像的宽度自动设置CSS宽度。我试图将float: left和display: inline-block设置为.sliderImage我还试图在white-space: nowrap;上设置#containerDiv。似乎没什么用。当所有图像需要全部在同一条线上时，所有图像都会向下推到下一行，然后它们将被溢出设置隐藏。有没有办法在没有JavaScript或jQuery？

的情况下执行此操作

修改我拿出溢出物：隐藏在这个jsfiddle上，这样你就可以看到它是如何包裹起来的。 http://jsfiddle.net/ut3o3pg3/

Answer 1

是的，添加containerdiv img {在块中添加宽度和高度，如果图像}这应该给它一个固定的大小，如果图像较小的宽度和高度小于div中的属性图像将被拉伸如果更大，图像将缩小。

Answer 2

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

将white-space: nowrap;添加到#containerDiv，将display: inline-block;添加到.sliderImage，以强制图片显示为内嵌。

请在此处查看：jsFiddle

自动划分宽度，内置img

2 个答案: