css - 画像/ブロックを横に表示

Question

y軸をオーバーフローせずにx軸をオーバーフローさせずに画像/ブロックを表示するdivを取得しようとしています。

ここに運のない私の試みがあります http://fiddle.jshell.net/VJX3p/1/

Answer 1

white-space: nowrap;子div画像にスタイルを適用すると水平方向に配置されます

#child {
  position:relative;
  background:#fde;
  width:400px;
  height:300px;
  overflow-x:auto;
  white-space: nowrap;
}

Answer 2

#parent {
  position:relative;
  background:#fd2;
  width:500px;
  height:350px;
  overflow:hidden;
}
#child {
   position:relative;
  white-space:nowrap;
  background:#fde;
  width:400px;
  height:300px;
  overflow-x:auto;
}

誰かが最終的な答えを知りたいと思っているなら. 皆さんありがとう。sreejithsdevwhite-space: nowrap;がそのトリックです。

Answer 3

この問題は CSS だけで解決できます。次のコードは、vid が x 軸でのみオーバーフローするようにします。

#parent {
  overflow-x: scroll;
}
#child {
  overflow: hidden;
  width: 2650px;
}
img {
  float: left;
  margin-right: 9px;
  display: block;
}

何が起こっているのかをよりよく説明するために、ここに私の思考プロセスがあります: 1) まず、画像を左にフロートさせて、画像が互いに隣り合うようにします (十分なスペースがある場合のみ、後で設定します)。画像の間隔を空けるために、margin-right を 9 px に設定しました。習慣から画像を表示ブロックとして設定しました（必須ではないと思います）。

2) すべての画像を 1 行に表示するには、#parent または #child の幅を 2650px にする必要があります。#child を 2650px に設定して、#parent を overflow-x に設定できるようにすることにしました (したがって、スクロール領域を作成します)。また、overflow: hidden を #child に設定して、すべての子がフローティングされているために発生する「clearfix」の問題を修正する必要があります。

画像を追加したり、画像のサイズを変更したりする場合は、#child の幅の値を再計算する必要があることに注意してください。より多くの画像を動的にロードする場合は、JavaScript を使用してサーバー側またはクライアント側で動的にこれを行うことができます。