只有水平滾動條的動態圖像大小

如何在我的div中只顯示水平滾動條。我有條形式的圖像，我只想爲它們顯示水平滾動條。我不想讓垂直滾動條出現。請幫助...只有水平滾動條的動態圖像大小

這裏是我的HTML

<div id="containersimg"> 
    <div id="wrapper"> 
     <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" /> 
     <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" /> 
     <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" /> 
     <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" /> 
     <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" /> 
    </div> 
</div>

，這裏是我的CSS

#wrapper { 
    width: auto; 
    height: 130px; 
} 

#containersimg { 
    background-color: #bbb; 
    width: 300px; 
    height: 130px; 
    overflow-x: scroll; 
} 

img { 
    float: left; 
    clear: none; 
    margin: 5px; 
}

我創建了一個小提琴證明我想實現

Fiddle Link

什麼

編輯1： 我能想到這樣做的唯一方法是通過增加寬度與wrapper DIV，我不能因爲數字和圖像的寬度是動態

來源

2013-07-03 Naveed Butt

檢查我的回答 –

不只是失去希望，有**必須* *是一種方式:) –

總有一種方法！ – MAST3RMIND

嘗試使用overflow-x: scroll; overflow-y: hidden;

這個CSS應該用在你的div上。

它只顯示x軸滾動條並隱藏y軸滾動條。 :)

如果你想圖像來一行，然後將display: inline; white-space: nowrap;添加到div。見this。

或使用列表。 :)像this。

來源

2013-07-03 06:30:55

你見過小提琴嗎？它會隱藏超出其高度的內部div的內容 –

因此，您還希望圖像也能排在前面？ –

圖像來排隊？你什麼意思？ –

您需要在滾動容器中包裝div以確保它們不受寬度約束，然後在容器上設置overflow-x：scroll。

快速小提琴演示。

FIDDLE

CSS：

#wrapper { 
    width: 500px; 
    height: 110px; 
} 

#containersimg { 
    background-color: #bbb; 
    width: 300px; 
    height: 135px; 
    overflow-x: scroll; 
} 

.square { 
    background-color: #00b; 
    float: left; 
    height: 90px; 
    width: 90px; 
    margin: 5px; 
}

來源

2013-07-03 06:36:14 MAST3RMIND

LINK - http://jsfiddle.net/vUEYG/ – MAST3RMIND

你忘了添加鏈接：P –

我的不好....！;） – MAST3RMIND

試試這個代碼。所述#wrapper指定的寬度應該是圖像寬度乘以圖像

的數量

#wrapper { 
    width: 500px; 
    height:400px 

} 
#containersimg { 
    background-color: #bbb; 
    width: 340px; 
    height: 130px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
} 
img 
{ 
    margin: 5px; 
    display: inline-block; 
}

演示：http://jsfiddle.net/vUEYG/162/

來源

2013-07-03 07:17:00

我已經在評論中提到圖像大小是動態的。含義，圖像寬度未知 –

可以使用javascript嗎？ – 2013-07-03 09:13:11

您必須使用javascript來確定動態寬度。請參閱http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript –

確定這是我的submition。您的代碼保持不變。我只添加了溢出y：隱藏到容器img樣式

我所做的是添加了約6行的Javascript。不jQuery的，普通的舊Javscript和一些聰明的數學和這應該工作

我加了一個工作小提琴..享受 http://jsfiddle.net/vUEYG/167/

var container = document.getElementById('wrapper'); 
var TW=0,Width=0;  // TW=Total width of the images 
for(var i=0;i<container.children.length;i++) 
    TW=TW+container.children[i].width; 
Width=TW/container.children.length+10; // The 10= Margin i.e 5 *2 
var width='width:'+container.children.length*Width+'px'; 
document.getElementById('wrapper').setAttribute("style",width);

來源

2013-07-03 09:56:21

只有水平滾動條的動態圖像大小

回答

相關問題