0

本文の幅が960pxのページがあり、ページの右側からオーバーフローさせたい画像の行があり、オーバーフローした画像の表示と水平方向のスクロールを可能にします。ページ全体を水平方向にスクロールするのではなく、その要素だけをスクロールします。

水平スクロールを機能させるのは比較的簡単ですが、ページ全体の幅を大きくしないと（つまり、ページを水平スクロールにしないと）オーバーフロー画像を表示することはできません。

私のCSS：

container{
  width:960px;
  margin: 0 auto;
  }

.pic-container {
  white-space:nowrap; 
  overflow:scroll;
  }

私の（簡略化された）HTML：

<body>
<container>
  <div class="pic-container">
    <div class="pic-row">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
    </div>
  </div>
</container>
</body>

これが私が探しているものの小さな図です：

ここに画像の説明を入力してください

4

2 に答える 2

3

これはあなたが探していることをするかもしれません（ここのJSFiddleを見てください）：

<section>
  <div class="pic-container">
    <div class="pic-row">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
    </div>
  </div>
</section>​

CSS：

body {
   overflow: hidden;
}
section {
  /* The width of your document, I suppose */
  width:600px;
  margin: 0 auto;
  white-space:nowrap; 
  overflow: scroll;
}
.pic-container {
 /* As large as it needs to be */
  width: 1500px;
}​

bodyページの幅がすべてを表示するのに十分でない場合でも、水平スクロールバーを防ぐために、のオーバーフローを非表示にします。div次に、設定された幅（おそらくドキュメントの幅）でコンテナのスクロールバーを表示し、その中のコンテンツdivを必要な幅にします。

sectionの代わりに幅を設定するだけの別の実装は、bodyここで表示できます。

于 2012-10-30T20:20:08.230 に答える
1

html + cssだけではこれを行う方法がわからなかったので、JQueryに頼りました。これは実際には完全に機能し、劣化も良好です。JavaScriptがない場合でも、画像はスクロール可能であり、右マージンにブリードしません（デフォルトでは、「。pic-container」divには、jsが追加されるまで幅がありません。で）。

// Update pic-container width
function picWidth() {
  win = $(document).width();
  width = String( Math.round(((win-960)/2) + 960) );

  $('.pic-container').css({'width' : width});
}
$(window).resize(picWidth);
picWidth();
于 2012-10-30T23:19:51.633 に答える