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只设置了查看块中的其他元素。

Answer 2

也许是这样的：

var eleWidth = 0;
$('.inner div').each(function(){
    eleWidth += $(this).width()
}).hover(function(){
    $('.inner').width(eleWidth+50)
}, function(){
    $('.inner').width(eleWidth)
})

$('.inner').width(eleWidth)

演示

您可以根据需要对其进行调整。