CSS を使用して等しい自動幅で並列 Div を作成するにはどうすればよいですか?

等しい自動幅を持つ CSS 並列 Div

親 DIV 内の子 DIV の自動幅を同じにするのは難しい場合があります。従来のフロートと幅のアプローチ。ただし、display: table プロパティを使用すると、この機能を有効にする最新のソリューションが提供されます。

Display: Table を使用したソリューション

1. 親 DIV を設定します (#wrapper ) をテーブルとして表示し、固定テーブル レイアウトを有効にします。これにより、子 DIV が同じ幅を占めるようになります。
2. 親 DIV の高さを設定して、利用可能な垂直方向のスペースを指定します。
3. 各子 DIV について、表示プロパティを table-cell に設定します。並べて表示され、親 DIV と同じ高さであることを確認してください。

CSS の例:

#wrapper {
  display: table;
  table-layout: fixed;
  width: 90%;
  height: 100px;
  background-color: Gray;
}

#wrapper div {
  display: table-cell;
  height: 100px;
}

HTML の例:

<div>

注:

• このソリューションは IE7 以前と互換性がありません。
• 提供されている JSFiddle の例3 つと 2 つの等幅の子 DIV の両方を示します。

以上がCSS を使用して等しい自動幅で並列 Div を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。