1

すべてのコードはここにインライン化されています： http ：//shanxinc.com/test/fancybox2/

私がやろうとしているのは、サムネイルの行を1行にまとめることだけです。ここwhite-spaceにdisplay:inline 記載されているものは機能していません。

そのため、上記の私のWebサイトにコードが表示されるので、私は不器用なものを試していtableますtable-cell。これにより、サムネイルが1行になりますが、水平スクロールバーは表示されません（サムネイルの行をその上の大きな画像の最大幅にします）。ディレクティブは overflow-x: scroll何もしていません。

質問：

  1. テーブルとテーブルセルを使用せずに、この望ましい効果を達成することは可能ですか？私はこれを「レスポンシブ」にしたいのですが、どういうわけか、テーブルのものがモバイル画面で機能しない可能性があると感じています。

  2. いずれにせよ、どうすれば横棒を表示させることができますか？

アイデアをありがとう！

編集：ここにも追加されたコード：

そのページのhtmlコードは非常にクリーンでシンプルなので、ソースを表示できますか？

HTMLは次のとおりです。

 <div class="holder">
      <img src="demo/img1.jpg" alt="" width="600" height="350">
      <div class="thumbnails">
          <a class="fancybox" rel="group" href="demo/img1.jpg" title="Exciting Title!"><img src="demo/img1s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img4.jpg" title="Bonjour!!"><img src="demo/img4s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img2.jpg" title="Yup, More Text.."><img src="demo/img2s.jpg" alt="" class="thumb"></a><br />
                <a class="fancybox" rel="group" href="demo/img3.jpg" title="Yelf Up."><img src="demo/img3s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img2.jpg" title="Yup, More Text.."><img src="demo/img2s.jpg" alt="" class="thumb"></a><br />
                <a class="fancybox" rel="group" href="demo/img3.jpg" title="Yelf Up."><img src="demo/img3s.jpg" alt="" class="thumb"></a>
          <a class="fancybox" rel="group" href="demo/img1.jpg" title="Exciting Title!"><img src="demo/img1s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img2.jpg" title="Yup, More Text.."><img src="demo/img2s.jpg" alt="" class="thumb"></a><br />
                <a class="fancybox" rel="group" href="demo/img4.jpg" title="Bonjour!!"><img src="demo/img4s.jpg" alt="" class="thumb"></a>
          <a class="fancybox" rel="group" href="demo/img1.jpg" title="Exciting Title!"><img src="demo/img1s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img3.jpg" title="Yelf Up."><img src="demo/img3s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img4.jpg" title="Bonjour!!"><img src="demo/img4s.jpg" alt="" class="thumb"></a>
      </div>
</div>

これが私が試した古いCSSですが、これは機能しませんでしたdisplay: inline。

.holder { width: 600px; display: block;  }
.thumbnails { display: block; overflow-x: scroll !important; height: 75px; white-space: nowrap; }
.thumbnails a { display: inline; width: 75px; height: 50px; float: left; }
.thumbnails a .thumb { width: 75px; height: 50px; display: inline; }

これが私が今試していることです：

.holder, .thumbnails { width: 600px; }
.thumbnails { display: table; overflow-x: scroll; white-space: nowrap; }
.thumbnails a { display: table-cell; padding-right: 2px  }
.thumbnails a .thumb { width: 75px; height: 50px; }

これにより、サムネイルが1行で表示されますが、水平スクロールは表示されません。

ありがとう！

4

1 に答える 1

6

これを行うには、次の手順に従います。

  1. <br>すべての要素を削除
  2. displayCSS クラスのルールを.thumbnailsからに変更tableしblockます。

.thumbnails { display: block; overflow-x: scroll; white-space: nowrap; }

そして、あなたはこれを得るでしょう：

http://oi48.tinypic.com/audpba.jpg

乾杯！

于 2012-05-12T06:58:11.260 に答える