javascript - 如何制作固定高度的无限水平容器

Question

我建立了以下网页:

http://tarjom.ir/demo/niazer/

那我需要什么？

如您所见，页面的最后一部分是一行图标和缩略图，当您悬停鼠标时 [悬停的元素] 会展开。我至少需要再显示十个缩略图，这会导致显示中断到下一行并使其成为两行缩略图(即使有更多的拇指也可能中断到三行甚至更多)。

我想要一个显示 1200 像素宽度但包含无限宽度(8000 像素或更大)元素的容器。我该如何实现？

这是这些元素的 CSS: 主水平包装，每个缩略图包装

.main-cat-wrapper
{
  float: left;   
   margin-right: 15px;
  margin-bottom: 50px;
  width: 100px;
  overflow: hidden;
  height: 105px;
}
.main-cat-wrapper:hover
{
    border-right: 1px #CCC dotted;
    cursor: pointer;
     background-color: #F9F9F9;
     box-shadow: 1px 1px 1px rgba(0,0,0,0.05);
}
.main-cat-wrapper img
{
    display: block;
    float: left;    
}
.main-cats
{

    height: 150px;
    position: absolute;
    left: 22.5%;

}

.main-cats 是负责保存所有缩略图的包装器。

Answer 1

你可以试试这个:

.main-cats {
  width:1200px;
  overflow: hidden;
  white-space:nowrap;
}

而不是 float 使用 display:inline-block:

.main-cat-wrapper {
  display:inline-block; 
}

查看此演示 http://jsfiddle.net/WFW25/3/ 我设置 overflow:auto 只是为了查看 block 中的其他元素。