帶有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