0

ナビゲーションサムネイル付きの画像スライダーがあります。私がやりたいのは、サムネイルが2行に配置されることです。各行には6divがあり（最初に12 divが表示されていることを意味します）、超過すると水平方向にオーバーフローし、水平方向のスクロールが必要になります。これはこの質問に関連しています：

水平方向の拡張を強制します。唯一の違いはそれです

divに1行ではなく2行を表示させたい。上記のリンクで提供されたソリューションを使用して、1行を表示することができました。

これが私のコードです：HTML

<div id="nav">
      <div id="thumbsWrap">
            <img alt="thumbnail">
            <img alt="thumbnail">
            <img alt="thumbnail"> 
             and so on and so on......
       </div>
 </div>

CSS

    #nav{bottom: 26px;height: 128px;left: 108px;overflow-x: auto; overflow-y:hidden;     position: absolute;width: 756px;}
#nav #thumbsWrap{width: auto; white-space: nowrap}
#nav a.thumbs{width:116px; height:95px; background: #4e5b63; display:inline-block; border-radius:8px; margin:6px 10px 0 0;}

どんな助けでも大歓迎です。前もって感謝します

4

2 に答える 2

2

同じdivを2回使用する場合は、IDではなくクラスを使用してください。特にJSがIDを使用している場合は、IDを複製しないでください。

于 2012-08-31T07:47:42.933 に答える
1

これを行う唯一の簡単な方法は、同じdivを2回追加することです。

<div id="nav">
    <div class="thumbsWrap">
        <img alt="thumbnail">
        <img alt="thumbnail">
        <img alt="thumbnail"> 
        and so on and so on......
    </div>
    <div class="thumbsWrap">
        <img alt="thumbnail">
        <img alt="thumbnail">
        <img alt="thumbnail"> 
        and so on and so on......
    </div>
</div>

こちらのデモhttp://jsfiddle.net/txCzq/32/

于 2012-08-31T06:58:52.850 に答える