親コンテナの CSS 均等分割 (完全三分の一) の実装

親コンテナの幅は固定されています。子要素が親の幅を均等に分割するには、どのような方法がありますか?

コードの HTML 部分:

方法1: フローティングレイアウト + パーセンテージ

（サブ要素を一つずつ左にフロートし、サブ要素の数に応じて各サブ要素の幅のパーセンテージを設定します）

方法2: インラインブロック + パーセンテージ

方法3: 親要素 display:table + 子要素 display:table-cell

方法 4: css3 display:flex; (フレックスレイアウト)

方法5: グリッドシステム（ブートストラップ）

子要素にクラス属性class=“col-md-3”を追加します。

上記の 5 つの方法はすべて、親要素コンテナーを 3 つの等しい部分に均等に分割できますが、パーセンテージに基づく最初の 2 つの方法では、パーセンテージが不正確な推定値であり、子要素に境界線がある場合は均等に分割するのが難しいため、3 つの等しい部分に完全に分割することはできません。

最後の3つの方法が推奨される

親コンテナの CSS 比例分割 (完全三分割) の実装に関するこの記事はこれで終わりです。親コンテナの CSS 比例分割に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。