我正在尝试使用 overflow-x: scroll 和 white-space: nowrap 创建一个带有(平铺)背景图像的水平滚动 Pane 。该 Pane 跨越任意数量的元素。
CSS:
.frame {
overflow-x: scroll;
}
.pane {
background-image: url(free-tile-floor-texture.jpg);
background-repeat: repeat;
white-space: nowrap;
}
.item {
display: inline-block;
width: 150px;
height: 50px;
background-color: grey;
}
HTML:
<div class="frame">
<div class="pane">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
我希望背景图 block 自动跨越 Pane 的整个宽度,包括其所有元素元素。目前它只填充到框架宽度。罪魁祸首似乎是 Pane 宽度属性 - 它不会根据 Pane 内容的整体宽度进行调整。
当然,它通过手动调整宽度属性来工作,但我需要它动态调整。
如何让 Pane 的背景图像填满 Pane 的整个宽度?有没有其他方法可以达到同样的效果?
最佳答案
将这一行添加到.pane
display: inline-block;
关于css - 具有 'white-space: nowrap' 的元素的宽度不适应子内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22260240/