2

問題は非常に単純ですが、やりがいがあります...スクロール可能な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 の幅に依存しないように多くの回避策を試しましたが、必要なことを行うためのより良い方法が見つかりませんでした。ご協力ありがとうございました。

4

2 に答える 2

2

追加

display:inline-block;

そしてそれはそれを修正します..

http://jsfiddle.net/xdKrF/11/のデモ

于 2012-11-08T15:09:50.907 に答える
-1

background-size:coverプロパティを使ってみる

于 2012-11-08T14:50:59.600 に答える