固定サイズのコンテナ内でフローティング Div を水平方向に整列するにはどうすればよいですか?

Floated Div を水平方向に整列する

固定サイズでオーバーフローが非表示になっているコンテナ div を操作する場合、Float Div を水平方向に整列させるのは難しい場合があります。デフォルトでは、浮動 div は、上に利用可能なスペースがある場合でも、親の右境界に達すると次の行に折り返されます。

望ましい外観

望ましい外観は、div の水平方向の行です。コンテナ内で複数の行に折り返されるのを防ぎます。空白を含むインライン要素: no-wrap はこれを実現できますが、浮動ブロックレベル要素には適していません。

解決策

これに対処するには、内部 div をすべての浮動 div を収容するのに十分な幅を持つコンテナー。コンテナーと内部 div の両方でオーバーフロー プロパティを非表示に設定すると、div が指定された領域からはみ出すのを防ぐことができます。

コード例

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

以上が固定サイズのコンテナ内でフローティング Div を水平方向に整列するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。