在可滚动分区中显示图像

Displaying images in scrollable div

本文关键字：显示 显示图 图像 分区 滚动      更新时间：2023-09-26

我有一个图像数组（它们的src-url），我想把它们显示在一行中，就像这样：

[Image1][image2][image3]

如果有很多图像，我希望它们所在的<div>在x轴上可以滚动，这样图像就仍然在一行中。

这就是我现在拥有的：

<div style="overflow-x:scroll" class="col-md-12">
    <span ng-repeat="item in images" >
        <a ng-href="{{item.ServerRelativeUrl}}" target="_blank">
            <img width="128" ng-src="{{item.ServerRelativeUrl}}" alt="Description">
        </a>
    </span>
</div>

我确实看到了div上的"滚动"，但已褪色。我的图像是这样的：

[Image1][Image2][Image3]

[图像4]

我在这里错过了什么？

开始：http://jsfiddle.net/danhaswings/nndhjp67/

HTML

<div id="slide">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
</div>

CSS

#slide {
    width: auto;
    height: 100px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

添加white-space: nowrap:

<div style="overflow-x:scroll; white-space: nowrap" class="col-md-12">

尝试将这些CSS规则添加到包装div中。

overflow-x: scroll;
overflow-y: hidden;
width:100%;
相关文章：