如何使孩子的div寬度與其內容與父級的div寬度匹配100％溢出-x：在IE和FF中自動

Question

我有一個充滿縮略圖的美術館。 我想添加一個自定義的水平滾動條，以便用戶可以滾動單行縮略圖。 每個圖庫中都有不同數量的縮略圖。 我嘗試使用CSS屬性“ width：-moz-max-content;” 但是，這僅適用於Firefox，不適用於IE6、7、8，Chrome或Safari。

這是一個示例-> http://theo.mypreview.co.uk/ashmolean-museum

網站的寬度設置為觀看者瀏覽器大小的90％。

div class =“ Content”-持有人
div id =“ posts”-生成所有縮略圖的位置

旁注-我剛安裝了jscroll

Answer 1

您可以使用一些特定於瀏覽器的CSS3屬性：

#hero {
    width: -moz-max-content; /* Firefox */
    width: intrinsic; /* Safari, Chrome */
}

有關這些屬性的信息，請查看以下MDN文檔：

https://developer.mozilla.org/en/CSS/max-width

您會注意到，它們不支持IE9 / IE8 / IE7，而且絕對不支持IE6。 但是，我想解決此問題的一種方法是使用JS計算寬度並將寬度添加到需要此功能的元素。

Answer 2

有一些非常好的jquery畫廊可以滿足您的需求。 只是谷歌的jQuery畫廊。 或http://www.1stwebdesigner.com/design/fresh-jquery-image-gallery-display-solutions/ 。 我希望這有幫助