5

如何在我的 div 中只显示水平滚动条。我有条形图像，我只想为它们显示水平滚动条。我不希望出现垂直滚动条。请帮忙...

这是我的 HTML

<div id="containersimg">
    <div id="wrapper">
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
    </div>
</div>

这是我的 CSS

#wrapper {
    width: auto;
    height: 130px;
}

#containersimg {
   background-color: #bbb;
   width: 300px;
   height: 130px;
   overflow-x: scroll;
}

img {
   float: left;
    clear: none;
   margin: 5px;
}

我创建了一个小提琴来展示我想要实现的目标

小提琴链接

编辑1： 我能想到的唯一方法是向wrapperdiv添加宽度，我不能这样做，因为图像的数量和宽度是动态的

4

4 回答 4

2

尝试使用overflow-x: scroll; overflow-y: hidden;

这个 CSS 应该用在你的 div 上。

它只会显示 x 轴滚动条并隐藏 y 轴滚动条。:)

如果您希望图像排成一行，请添加display: inline; white-space: nowrap;到 div。看到这个。

或使用列表。:) 像这样。

于 2013-07-03T06:30:55.063 回答
2

好的，这是我的提交。您的代码保持不变。我只在容器 img 样式中添加了 overflow-y: hidden

我所做的是添加了大约 6 行 Javascript。不是 Jquery，简单的旧 Javscript 和一些聪明的数学，这应该工作

我添加了一个工作小提琴 .. 享受 http://jsfiddle.net/vUEYG/167/

var container = document.getElementById('wrapper');
var TW=0,Width=0;      // TW=Total width of the images
for(var i=0;i<container.children.length;i++)
    TW=TW+container.children[i].width;
Width=TW/container.children.length+10;  // The 10= Margin i.e 5 *2 
var width='width:'+container.children.length*Width+'px';
document.getElementById('wrapper').setAttribute("style",width);
于 2013-07-03T09:56:21.590 回答
0

您需要在滚动容器内包含一个包装 div 以确保它们不受宽度限制，然后在容器上设置 overflow-x: scroll。

快速小提琴演示。

小提琴

CSS：

#wrapper {
    width: 500px;
    height: 110px;
}

#containersimg {
   background-color: #bbb;
   width: 300px;
   height: 135px;
   overflow-x: scroll;
}

.square {
   background-color: #00b;
   float: left;
   height: 90px;
   width: 90px;
   margin: 5px;
}
于 2013-07-03T06:36:14.867 回答
0

试试这个代码。#wrapper 的宽度应该是图像宽度乘以图像数量

#wrapper {
    width: 500px;
    height:400px

}
#containersimg {
    background-color: #bbb;
    width: 340px;
    height: 130px;
    overflow-x: scroll; 
    overflow-y: hidden;
}
img 
{
    margin: 5px;
    display: inline-block;
}

演示：http: //jsfiddle.net/vUEYG/162/

于 2013-07-03T07:17:00.477 回答