CSS 複数列レイアウト_html/css_WEB-ITnose-htmlチュートリアル-php.cn

個人ブログからの転載

この記事のレイアウトでは親要素の 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)

上記に基づいて、

を最外層に追加して、

<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 をクリアする必要があります。