Question

我建立了以下网页：

那我需要什么？

如您所见，页面的最后一部分是一排图标和缩略图，当您悬停鼠标时[悬停项目]会展开。我需要至少十个缩略图才能使显示器突破到下一行并使其成为两行缩略图（即使用更多拇指也可以缩小到三行甚至更多）。

我想要一个容器，它显示宽度为1200px但包含无限宽度（8000px或更高）的元素。我该怎么做到这一点？

以下是这些元素的CSS：主要水平包装，每个thumnbail包装

.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是负责保存所有thumnails的包装器。

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)

Demo

您可以根据自己的需要调整它。

如何制作一个固定高度的无限水平容器

2 个答案: