Question

所以我有一个网页，在600px宽的iframe中显示一些内容。 iframe中UI的包装器宽度为500px，溢出设置为隐藏。在此UI中包含水平排列的单行照片。不同的用户将具有不同数量的照片，因此不能指定宽度。在大多数情况下，所有照片（及其边距）的宽度将超过500px宽的UI，因此并非所有照片都能同时显示。用户可以水平拖动和滚动，以便在页面加载时查看不在视图中的照片。

.wrap {
    width: 500px;
    overflow: hidden;
    margin: 0 auto;
}
.scroller-container {
    position: relative;
    height: 100px;
}
.scroller {
    position: absolute;
    z-index: 100;
}
.scroller img {
    margin: 0 5px;
}

<div class="wrap">
    <div class="scroller-container">
        <div class="scroller">
            <img src="myimg.png" /><img src="myimg.png" /><img src="myimg.png" /><img src="myimg.png" /><img src="myimg.png" /><img src="myimg.png" />
        </div>
    </div>
</div>

我的问题是，由于包装器的右边缘和右边缘之间只有100px，因此在将照片“包裹”到第二行并垂直扩展其高度之前，滚动器仅延伸100px。它已经到达了右边缘。为了使照片水平滚动，它们必须保持在一行中。

如果我能够为滚动条指定固定的宽度，它将延伸到超出边界并保持在1行中，一切都会很棒。但由于宽度因用户而异，因此无法实现。

是否有一种仅限CSS的方法可以使非固定宽度超出<iframe>的右边界？

Answer 1

将white-space: nowrap添加到.scroller。这将（i）防止图像分成换行符（ii）如果需要，将div水平扩展超过100％宽度。

Demo Here

如何让<div>水平扩展超出页面（或Iframe）边界而不指定宽度</div>

1 个答案: