オーバーフロー コントロールを使用して Div 要素を水平方向に整列させるにはどうすればよいですか?

オーバーフロー コントロールを使用した Div 要素の水平方向の配置

CSS レイアウトの領域では、要素の配置の管理に特有の課題が生じることがあります。オーバーフローを防ぎながら、幅と高さが固定されたコンテナ内で div を水平方向に整列させようとすると、一般的な問題が 1 つ発生します。

この問題の根本原因を理解するには、次のシナリオを考慮してください。 overflow:hidden が適用された指定された幅と高さ。このコンテナ内に、float:left div 要素の水平行を作成します。 div は左にフロートされているため、親コンテナの右境界に到達すると、自然に次の「行」に移動します。これは、親内に十分な垂直方向のスペースがある可能性があるにもかかわらず発生し、望ましくないレイアウトになります。

課題への対処

オーバーフローせずに目的の水平方向の配置を実現するには、次のような賢い手法を使用できます。これには、コンテナ内に追加の内部 div を導入することが含まれます。この内部 div には、すべての浮動子 div を収容できる十分な幅が必要です。次の CSS および HTML コード スニペットでは、この手法が示されています。

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

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

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

<div>

この手法を利用すると、より幅の広い仮想コンテナを効果的に作成し、子 div を無限に左にフロートさせることができます。親コンテナの水平方向の境界内。 overflow: hidden プロパティは、内部 div が確実に隠蔽され、余分な div 要素が表示されないようにします。

このソリューションは、div が途中で次の行に移動する問題を効果的に解決し、その結果、内部の水平行がきちんと整列します。指定されたコンテナ。

以上がオーバーフロー コントロールを使用して Div 要素を水平方向に整列させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。