Div内滚动div不消耗内容宽度

Question

问题很简单，但具有挑战性......我有一个div在滚动div内。两者都具有透明度的背景图像。内部div的内容比容器的宽度更宽，因此使其滚动没有问题，但内部div的宽度不会变大，所以我们丢掉背景...

Here is the fiddle下面的代码。

HTML

<div id="container"> 
<div id="content"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
</div>​ 

CSS

#container{ 
    width:500px; 
    overflow-x:scroll; 
    background:blue; 
    padding-left:200px; 
} 
#content{ 
    white-space:nowrap; 
    padding:30px; 
    background:green; 
} 
#content div{ 
    display:inline-block; 
    height:100px; 
    width:100px; 
    margin-right:15px; 
    background:red; 
}​ 

我已经尝试了许多解决方法，不依赖于内部的div的宽度，但我还没有发现任何更好的办法做到我需要什么。 谢谢你的帮助。

Answer 1

添加

display:inline-block; 

，并修复它..

演示在http://jsfiddle.net/xdKrF/11/

Answer 2

尝试使用background-size:cover财产