自動Div寬度與img的內部

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，現在和滑塊按預期工作，用按鈕滑塊的點擊幻燈片和更多的圖像，然後顯示在視圖中。但是，圖像現在正在動態添加，每個圖像的寬度都不相同。所以我想根據圖像的寬度CSS自動設置寬度#containerDiv。我試圖將float: left和display: inline-block設置爲.sliderImage我也嘗試將white-space: nowrap;設置爲#containerDiv。似乎沒有任何工作。當所有圖像需要全部放在同一行上時，所有圖像都會被推到下一行，然後它們將被溢出設置隱藏起來。有沒有辦法做到這一點沒有JavaScript或jQuery？

編輯： 我拿出溢出：隱藏在這個jsfiddle，所以你可以看到它如何包裝下來。 http://jsfiddle.net/ut3o3pg3/

來源

2014-09-22 iRebel_85

可以使一些活生生的例子的jsfiddle或codepen -.....內聯塊和空格必須做的伎倆 – DaniP 2014-09-22 21:11:39

@Danko我剛添加的鏈接的jsfiddle。我拿出了CSS中的溢出，所以你可以看到它是如何包裝的。 – 2014-09-22 21:18:44

看起來好像'＃containerDiv'寬度試圖設置爲圖像的寬度，但是它被＃frameDiv停止了。 – 2014-09-22 21:21:34

是的，有添加containerdiv img {內部塊添加寬度和高度，如果圖像}這應該給它一個固定的大小，如果圖像的寬度和高度小於div中的屬性圖像將被拉伸，如果較大，圖像會縮小。

來源

2014-09-22 21:05:03 kiiiidJesse

我不想將圖像拉伸到'＃containerDiv'的寬度/高度。我試圖讓'＃containerDiv'寬度設置爲裏面所有圖像的總寬度。 – 2014-09-22 21:11:14

嘗試向容器div添加一個寬度 – kiiiidJesse 2014-09-23 05:17:28

將display: table;增加到#containerDiv和#frameDiv根據其內容動態增長它們。

將white-space: nowrap;添加到#containerDiv和display: inline-block;到.sliderImage強制圖像以內聯方式顯示。

看看這裏：jsFiddle

來源

2014-09-22 23:26:38

自動Div寬度與img的內部

回答

相關問題