CSS 複数列レイアウト_html/css_WEB-ITnose

個人ブログからの転載

この記事のレイアウトでは親要素の float がクリアされていないため、float を使用する一部のレイアウトでは、親要素の float をクリアする必要があることに注意してくださいコンテナ 、実際の状況で使用できます。 (フロートをクリアする方法についてはここでは説明しません)

1 つの列は固定幅で、1 つの列はアダプティブです

この部分の HTML 構造は次のとおりです:

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

まず見た目を見てみましょう左側にフロートを直接追加するのが好きです:

驚かないでください。フロートは元々このテキストの折り返し効果を実現するために使用されていましたが、Siege エンジニアによって破壊され、レイアウトに使用されました。しかし、これは私たちが望んでいることではありません。

これは正しいです！それが私たちが望んでいることです！ CSS の実装を見てみましょう:

1. float+margin

.left{       float: left;    width: 100px;}.right{    margin-left: 120px;}

利点: IE7 以降と互換性があり、理解しやすい 欠点: 右の最初の要素が明確な float である場合、右は落ちます。下がっていく状況。

エラーの例を見てみましょう:

それを解決するには?

2. 改良版 --- float+margin+fix

利点: 優れた互換性、すべてのブラウザーとの互換性; 欠点: 構造の増加、複雑なスタイル。

レイアウトは次のように変更されます:

<div class="parent">    <div class="left">        <p>left</p>    </div>    <!-- html部分在这个地方进行了添加，使用right-fix把原有结构包裹住了 -->    <div class="right-fix">        <div class="right">            <p >right</p>            <p>right</p>        </div>    </div></div>

CSS 部分:

.left{    float: left; width: 100px;    position: relative; /*提升左边的层级*/}.right-fix{    float: right; width: 100%;    margin-left: -100px;/*处理右边掉下来的情况*/}.right{    margin-left: 120px;}

3. float+overflow

利点: セットアップが簡単;

.left{    float:left;    width:100px;    margin-right:20px;}.right{    overflow:hidden;/*触发BFC*/    /*_zoom:1;*/ /*IE6使用zoom:1来触发BFC*/}

HTML 構造は最初のものと同じです。

利点: テーブルのレンダリングを高速化し、レイアウトの優先順位を実装します。欠点: 大量のコードと複雑さ

4. flex

利点: iE10+ との互換性が低く、パフォーマンスが低く、小規模なレイアウトによく使用されます。

すごい

固定幅の複数列とアダプティブ 1 列

実現したい効果を見てみましょう:

実際には、上のレイアウトの中央に中心を追加しているだけです。

HTMLの構造は以下の通りです:

.parent{    display: table; width: 100%;    table-layout: fixed;/*加速table渲染，实现布局优先*/}.left,.right{    display: table-cell;}.left{    width: 100px;    padding-right: 20px;}

CSS部分: 左と同じ中央を設定します

.parent{    display: flex; } .left{    width: 100px;    margin-right: 20px; } .right{    flex:1;/**/ }

1列は可変幅、1列はアダプティブです

HTML構造 同じ列は固定幅で1列です適応的です。

実際には、固定幅の 1 つの列と適応幅の 1 つの列の最後の 3 つを変更することです

効果は上記と同じですが、幅は固定されなくなりました。

1. float+overflow

利点: 互換性が高く、最もよく使用され、構造が単純です (実際、元の実装ではすでにこれが実現されているため、上記からの変更は左側のコンテンツを使用することです。効果)

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

2. table

短所: IE8+ をサポート、複雑な設定。

CSS に次の変更を加えます:

.left,.center{    float: left;    width: 100px;    margin-right: 20px;}.right{    overflow: hidden;}

3. flex

欠点: 上記と同じ問題が依然として発生します

.left{    float:left;    margin-right:20px;    /*width:200px;*//*可设置宽度，也可使用内容撑开*/}.right{    overflow:hidden;}.left p{width:200px;}/*使用内容去撑开宽度*/

2 つの列は可変幅で、1 つの列は適応型です。

HTML 構造は、固定幅の 2 つの列とアダプティブな 1 つの列と同じです。

float+overflow を例にとると、中央を左と同じに設定するだけです。

.parent{    display: table; width: 100%;}.left,.right{    display: table-cell;}.left{    width: 0.1%;/*只要足够小就行*/    padding-right: 20px;}.left p{width:200px;}/*使用内容去撑开宽度*/

この方法に加えて、上記の 3 つの可変幅方法が使用できます

均等配分

HTML の構造は次のとおりです:

.parent{    display: flex; } .left{    margin-right: 20px; } .right{    flex:1;/**/ } .left p{width:200px;}/*使用内容去撑开宽度*/

いつものように、最初に実装プロセスを分析しましょう。以下の図をご覧ください:

実際には、負のマージンである G を親コンテナに追加するだけです:

1. float+margin

利点: 設定が簡単。欠点: IE8+ をサポートします。レイアウトを変更すると、CSS スタイル (幅: XX%) を変更する必要があります。

.left,.center{    float: left;    margin-right: 20px;}

実装の効果は次のとおりです:

達成？実際には、必ずしもそうではありません。左端に別の幅があることがわかります。

これはバグではなく、私たちの設定によって引き起こされます。 ここで上のpadding-left: 20px;を削除すると、次のようになります:

パディングが必要な場合は、自分で設定してください

2. fix)

上記に基づいて、a3efdd3b4df87437b322df106f062ba8 を最外層に追加して、b428c3c18a70c3fd9550e96bb117dafa

<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>

3.効果は次のとおりです:

Flex が残りのスペースを自動的に割り当てるため、ここではマージンが使用されます

等しい高さのレイアウト

まず目的の効果を見てみましょう:

とてもよくわかりましたか? HTML は最初の部分と同じです:
ただし、両側の高さは最も高い部分の高さと同じです。 うわー

table レイアウトと flex レイアウトを使用すると、自然に同じ高さのレイアウトが実現されます

ここには載せませんので、上記のコード実装を参照してください。主に次の解決策です:

float の実装

実際、まったく同じではなく、効果を達成するだけです

p{background:#666;}/*对div中的p标签设置才有间隔效果，所以在设置内容时，也是在p中设置*/.parent{    margin-left: -20px;}.column{    float: left;    width: 25%;    padding-left: 20px;    box-sizing: border-box;}

もう一度思い出してください: 実際の状況では、外側のコンテナは float をクリアする必要があります。