CSS 複数列レイアウト スキーム配置_html/css_WEB-ITnose

出典: https://segmentfault.com/a/1190000004500652

CSS の属性の値と特性を理解し、問題を徹底的に分析し、最適なレイアウト ソリューションを選択して設計する必要があります。

Web ページでは複数列レイアウト (2 列レイアウトなど) が非常に一般的です。複数列レイアウトには、固定幅の 2 列と適応幅の 1 列、または可変幅の複数列を使用できます。 1列アダプティブかつ均等に分割されたレイアウトなど。

固定幅 - アダプティブ

次のレイアウトがあります

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right">    <p>right</p>    <p>right</p>  </div></div>

float+margin

  .left {    float: left;    width: 100px;  }  .right {    margin-left: 100px    /*间距可再加入 margin-left */  }

利点: 理解しやすい

欠点: IE6 には 3 ピクセルのバグが存在します。解決策は、margin-left:-3px を .left に追加することです。

左がフローティング要素で右がフローティングではないため、右のコンテンツに明確なフローティングがあるとバグが発生します。

改善点: float + margin + (fix)

<div class="parent">  <div class="left">    <p>left</p>  </div>    /*外层在包裹一个容器*/  <div class="right-fix">    <div class="right">      <p>right</p>      <p>right</p>    </div>  </div></div><style>  .left {    float: left;    width: 100px;  }  .right-fix {    float: right;    width: 100%;    margin-left: -100px;  }  .right {    margin-left: 100px    /*间距可再加入 margin-left */  }</style>

互換性が高く、複数のバージョンのブラウザー (IE6 を含む) に適していますが、右固定構造の追加レイヤーが追加されています。 。ただし、左は選択できず、右固定でカバーされます。レベルを上げるには、 left のposition:相対を設定する必要があります。

float+overflow

 .left{        float: left;       width: 100px;       margin-right: 20px;  }  .right{ overflow: hidden; //触发BFC }

overflow:hidden は、BFC レイアウト ルールの 1 つである div に従って、BFC モード (ブロック フォーマット コンテキスト) のブロックレベルでフォーマットされたテキストを生成します。 BFC 領域は左側のフローティング要素と重なりません。 BFC について詳しくは、この記事をご覧ください。

table

 .parent {    display: table;    width: 100%;    table-layout: fixed;  }  .left {    display: table-cell;    width: 100px;  }  .right {    display: table-cell;    /*宽度为剩余宽度*/  }

table 表示の特性は、各列のセル幅がテーブル幅と等しいことです。 table-layout: レンダリングを高速化し、レイアウトの優先順位も設定できるように修正しました。

テーブルセルにマージンを設定することはできませんが、スペースはパディングを通じて設定できます。

flex

 .parent{       display: flex ;   } .left {        width: 100px;       margin-right: 20px;  }  .right{        /*等价于flex:1 1 0; 增长因子和收缩因子都为1，         基础宽度为0,那么剩余宽度都分配给right*/        flex: 1 ;     } 

flex-item のデフォルトはコンテンツの幅です。

短所: CSS3 との互換性。内容から判断すると、小規模レイアウトは大規模レイアウトには適していません。

無限幅 - アダプティブ

float + オーバーフロー

  .left{        float: left;       width: 200px;       margin-right: 20px;  }  .right{ overflow: hidden; //触发BFC }

table

 .parent{       display:table;       width: 100%;  } .left, .right {        display: table-cell;  }  .left{        width:0.1%;  //写的够小就行，不写1px的原因是IE8会有问题       padding-right:20px;    }  .left p{ width : 200px;}  //用内部元素撑开，宽度可以不定

flex

.parent{display:flex;}.left{margin-right:20px;}.right{flex:1;}

幅が可変の 3 列 + 2 列と同じようにアダプティブ

均等に分散されたレイアウト

各列の幅と間隔は等しいです。次の HTML 構造があります

<div class="parent">    <div class="column"><p>1</p></div>    <div class="column"><p>2</p></div>    <div class="column"><p>3</p></div>    <div class="column"><p>4</p></div></div>

float

 .parent{    margin-left ：-20px; //为父元素增加20px宽度    } .column{       float : left;       width: 25%;       padding-left : 20px;       box-sizing : border-box;      }

欠点: 構造とスタイルはわずかに結合しています

table

 .parent-fix{  margin-left ：-20px; //为父元素增加20px宽度 } .parent{       display : table;      width : 100%;      table-layout : fixed;  }       .column{       float : left;       width: 25%;       padding-left : 20px;       box-sizing : border-box;  }

fix

 .parent{       display : flex;  }       .column{      flex: 1;  }  .column+.column{  margin-left: 20px;  } //选择2，3，4

同じ高さの要件

table

上記の適応テーブル レイアウトは昇順レイアウトです

flex

上記と同様アダプティブ、フレックス自然等高の例

float

 .parent{  overflow : hidden; } .left, .right{       padding-bottom : 9999px;       margin-bottom : -9999px;  }

利点は互換性が高いことですが、欠点は疑似等高が本当の意味で登らないことです