CSS で均等な分散を実現する 4 つの方法

この記事では主にCSSで均等配置を実現する4つの方法を詳しく紹介します 均等配置とは、子要素が親要素の幅を均等に配置するレイアウト方法のことを指します。

均等配分とは、子要素が親要素の幅を均等に配分するレイアウト方法を指します

アイデア1: float

デメリット: 構造とスタイル。が結合されており、IE7ブラウザでは幅のパーセンテージ値に丸め誤差があります

【1】float + padding + background-clip

サブ要素間の間隔を実現するためにpaddingを使用します。子要素のパディング部分に背景を表示しないようにするbackground-clip

CSSコード内容をクリップボードにコピー

1. コンテンツをクリップボードにコピー

2. < p

   class
=
3. "parentWrap "

   >

4. style

   ="background-color: lightgrey;">

5. >1< /

>

7. >

2

8. p

>

p> p> >

【3】インラインブロック+マージン+(修正)

CSSコードコンテンツをクリップボードにコピー

XML/HTMLコード

コンテンツをクリップボードにコピーします

<

p

クラス

= "parentWrap">

1. <p class ="parent" style=

   " 背景色: lightgrey;"
2. > ;

   「> p

   >

3. p> 「子供」 スタイル=

   "背景色: 緑;"
4. >

   >2 p> class="child" style="背景色: オレンジ;">

5. p> style="background-color: red;" > 4

6. p

   > ;

7. p

   > p> p

>

8. 【2】テーブル+兄弟セレクター

   CSSコード
9. クリップボード

     

XML/HTMLコード复制コンテンツを剪贴パネルへ

1. <p class =「親」 スタイル="背景色: ライトグレー;">

2. <p クラス="子" スタイル="背景色: ライトブルー;" > 1p>

3. <p class="child" style="background-color:ライトグリーン;「>」 2p>

4. <p class=「子供」 スタイル=「背景」 -color: ライトサーモン;"> ;3p>

5. <p class=「子供」 スタイル=「背景-色: ピンク;" >4p>

6. p>

以上が本書のすべての内容です、

本文リンク：http://www.cnblogs.com/xiaohuochai/p/5456695.html

以上がCSS で均等な分散を実現する 4 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。