Question

问题很简单但很有挑战性......我有一个div，它位于一个可滚动的div中。两者都有透明的背景图像。内部div的内容比容器的宽度宽，因此滚动没问题，但内部div的宽度不会变大，所以我们松开背景...

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属性

可滚动div内的Div不会扩展到内容宽度

2 个答案: