0

次の Web ページを作成しました。

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

次に、何が必要ですか？

ご覧のとおり、ページの最後の部分はアイコンとサムネイルの列で、マウスをホバーすると [ホバーした項目] が展開されます。そこに少なくとも 10 個のサムネイルを追加する必要があります。これにより、表示が次の行に分割され、2 行のサムネイルになります (親指が増えても 3 つ以上に分割される可能性があります)。

1200px の幅を表示するが、無限幅 (8000px 以上) の要素を含むコンテナーが必要です。どうすればこれを達成できますか?

これらの要素の 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すべてのサムネイルを保持するラッパーです。

4

2 に答える 2

2

これを試すことができます：

.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ブロック内の他の要素のみを表示するように設定しました。

于 2013-11-05T20:34:06.993 に答える
0

多分このようなもの：

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

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

デモ

必要に応じて微調整できます。

于 2013-11-05T20:31:04.987 に答える