Question

我想在（较小的）容器div中创建一个带有缩略图的可滚动行。

如果不将img包装在列表中，这可能吗？我试过

float:left
display: inline-block;

用于图像

和/或

overflow: auto;

在容器div。

但div显示在一列中，并且没有水平滚动条出现（只有在使用overflow：auto时才垂直）。

jsfiddle：http://jsfiddle.net/8qJSr/1/

Answer 1

通过将图像保持在外部包装内滚动的包装中，您可以非常轻松地实现此目的。

jsfiddle链接：here;

HTML：

 <div id="wrapper">
   <div id="innerwrapper">
    <img />
    <img />
    <img />
    <img />
    <img />
    <img />
    <img />
   </div>
 </div>

CSS：

#wrapper { height: 100px; overflow: auto; width: 500px; overflow-y: hidden;}
img {height: 100px; width: 200px;float: left;}
#innerwrapper { width: 1200px;}

Answer 2

如果你的图像包含在椭圆形的div中，那么上面的css就可以了。

Answer 3

float:left;可以正常使用。对于这样的标记

<div id="collection">
   <img ... />
   ...
</div>

CSS

#collection {
    height: 200px;
    overflow: auto;
}
#collection img { float:left }

水平可滚动图像行没有列表

3 个答案: