CSS で隣り合う Div の幅を等しくするにはどうすればよいですか?

CSS での横並びの Div の等しい幅

HTML では、親コンテナ内の要素の整理は、多くの場合 div 要素を使用して行われます。 。ただし、複数の子 div を同じ幅で並べて配置するのは難しい場合があります。

次の HTML 構造を考えてみましょう:

<div>

この例では、子 div は並べて配置されています。 、ただし、幅は任意です。幅を等しくするには、display: table プロパティを使用して CSS マジックを使用できます。

#wrapper {
    display: table;
    table-layout: fixed;

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

この CSS ソリューションには、次のような重要な機能があります。

• セットテーブル (display: table) として表示する親 div (#wrapper) を設定し、同じ列幅を確保するために table-layout: fix を設定します。
• テーブルのセルとして表示するように子 div (#wrapper div) を設定します。 (表示: 表セル) は同じ高さです。

利点:

• 最新のブラウザーで動作します (IE7 はサポートされていません)
• 利用可能なスペースに基づいて列の幅を自動的に調整します
• 子 div の数を変更して柔軟なレイアウトを可能にします

ライブ例:

• 2 つの Div: [JSFiddle](https://jsfiddle.net/g4dGz/1/)
• 3 つの Div: [JSFiddle](https://jsfiddle.net/g4dGz/)

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