仅使用 CSS 进行水平滚动

发布于 2025-01-08 06:13:41 字数 975 浏览 0 评论 0原文

在我正在处理的图像库中，我想要一个水平滚动（即缩略图水平列出），并且如果有太多适合该区域的区域，则包含它们的区域应该具有固定的滚动宽度。

下面是到目前为止的 CSS 代码，但它似乎不起作用，正如您在代码下面的快照中看到的那样。我可以写什么来实现我想要的？

提前致谢！

#thumbnailArea {
    padding: 5px;
    width: 600px;
    height: 90px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid black;
}

在此处输入图像描述

缩略图区域的 HTML 代码（使用 ASP.net Webforms 生成）如下：

<div id="thumbnailArea"> 

            <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a> 

            <a id="ImageRepeater_ImageHyperLink_1" class="thumbnails" href="default.aspx?name=Autumn.jpg"><img id="ImageRepeater_Image1_1" class="thumbnail" src="Images/Thumbnails/Autumn.jpg" /></a> 

and so on...

</div>

原文

in the image gallery i'm working on, I want a horizontal scroll (ie. the thumbnails are listed horizontal) and the area containing them should have a fixed width with scroll if there are to many to fit the area.

Below is the CSS code so far, but it doesn't seem to work as you can see on the snapshot below the code. What can I write to accomplish what I want?

Thanks in advance!

#thumbnailArea {
    padding: 5px;
    width: 600px;
    height: 90px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid black;
}

enter image description here

The HTML code for the thumbnail area (generated with ASP.net webforms) is as follows:

<div id="thumbnailArea"> 

            <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a> 

            <a id="ImageRepeater_ImageHyperLink_1" class="thumbnails" href="default.aspx?name=Autumn.jpg"><img id="ImageRepeater_Image1_1" class="thumbnail" src="Images/Thumbnails/Autumn.jpg" /></a> 

and so on...

</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

本王不退位尔等都是臣 2025-01-15 06:13:41

这是因为容器适合您提供的宽度。为了达到预期的效果，您应该使用两个嵌套的 div：外部具有给定的宽度，内部包含图像。

示例： http://jsfiddle.net/jTJFa/1/

Html:

<div class="box">
    <div class="area">
        <img/>
        ...
    </div>
</div>

Css:

.box {
    width: 500px;
    overflow-x: scroll;
}

.area {
    width: 1000px;
}

That's because the container fits to the width you've provided. To achieve the desired effect, you should use two nested divs: outer with given width and inner holding the images.

Example: http://jsfiddle.net/jTJFa/1/

Html:

<div class="box">
    <div class="area">
        <img/>
        ...
    </div>
</div>

Css:

.box {
    width: 500px;
    overflow-x: scroll;
}

.area {
    width: 1000px;
}

回复收藏 0 原文

相思碎 2025-01-15 06:13:41

尽管您已关闭垂直滚动，但 #thumbnailArea 宽度不受影响（因此会强制换行）。这应该可以解决问题：

#thumbnailArea {
 white-space:nowrap;
}

Although you've turned off vertical scrolling, the #thumbnailArea width is not affected (and as a result, forces wrap). This should do the trick:

#thumbnailArea {
 white-space:nowrap;
}

回复收藏 0 原文

故事还在继续 2025-01-15 06:13:41

为此，您需要在缩略图 div 内放置一个具有一定宽度的 div，以便所有图片都能放入其中：

<div id="thumbnailArea"> 
    <div style="width: 1000px;">
         <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>

        <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>

       and so on...
    </div>
</div>

这应该可以解决问题，改变宽度，这样最后就不会出现大量的空白空间

For this to work you need a div inside the thumbnail div with a width so that all pictures fit inside:

<div id="thumbnailArea"> 
    <div style="width: 1000px;">
         <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>

        <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>

       and so on...
    </div>
</div>

That should do the trick, alter the width so that you don't have a massive empty space at the end

回复收藏 0 原文

~没有更多了~