CSS を使用して同じ幅の横並びの Div を作成するにはどうすればよいですか?

CSS を使用した自動等幅の並列 Div

親 div 内で自動的に等幅になる子 div を作成するには、 CSS の display: table プロパティの力を利用します。このアプローチは、IE7 ではサポートされていませんが、最新のブラウザでは効果的に望ましい結果を実現します。

解決策:

1. 表示するように親 div を設定します: table とテーブルレイアウト: 固定。これにより、テーブルのような構造が確立されます。
2. 表示する子 div を設定します: table-cell。これにより、それらが表のセルとして扱われ、幅が均等になります。
3. 必要に応じて、親 div の幅と高さのプロパティを調整します。

例コード:

CSS:

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

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

HTML:

<div>

デモ:

以下にアクセスしてください実際のソリューションを確認するための JSFiddle リンク:

• 3 つの div: http://jsfiddle.net/g4dGz/
• 2 つの div: http://jsfiddle.net/g4dGz/ 1/

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