両側にCSS固定レイアウト、中央に適応レイアウトを実装

フローティング、フローティング埋め込み div、配置、フレックスという 4 つの一般的な方法と原則を分析します。

フロート

<スタイル タイプ="text/css">
    .wrap {背景: #eee; パディング: 20px; }
    p {マージン: 0; }
    .left {幅: 200px; 高さ: 200px; フロート: left; 背景: coral; }
    .right {幅: 200px; 高さ: 200px; フロート: right; 背景: lightblue; }
    .middle {余白: 0 200px; 背景: ライトピンク; }
</スタイル>

<div class="wrap">
    <p class="left">私は左側です</p>
    <p class="right">私は右側にいます</p>
    <p class="middle">私は列の最後尾にいましたが、真ん中まで走りました</p>
</div>

原理：

フローティング要素と非フローティング要素は同じ 3 次元空間にありません。フローティング要素が明確でない場合、その下の要素が浮き上がります。
フローティング要素の高さは 0 です。フローティングボックスレベルはblockレベルの水平ボックスよりも高く、 inline/inline-block水平ボックスよりも低くなります。

フローティングインラインdiv

<スタイル タイプ="text/css">
    .wrap {背景: #eee; パディング: 20px; }
    p {マージン: 0; }
    .left {幅: 200px; 高さ: 200px; フロート: left; 背景: コーラル; 左余白: -100%;}
    .right {幅: 200px; 高さ: 200px; フロート: 左; 背景: ライトブルー; 左余白: -200px;}
    .middle {幅: 100%; 高さ: 200px; フロート: 左; 背景: ライトピンク; }
    スパン{
        表示: インラインブロック;
        マージン: 0 200px;
    }
</スタイル>

<div class="wrap">
    <p class="middle">
        <span class="inner">
            私は真ん中です 
    </p>
    <p class="left">私は左側です</p>
    <p class="right">私は右側にいます</p>
</div>

原理：

3 つの要素はすべてフロートされており、テーマ要素は行の 100% を占め、負のmarginを使用して要素を左右に配置します。
テーマ要素内にmargin: 0 200pxの別の子要素を追加して、コンテンツが左右の 2 つのフローティング要素によって覆われないようにします。

位置

<スタイル タイプ="text/css">
    .wrap {背景: #eee; 位置: 相対;}
    p {マージン: 0; }
    .left {幅: 200px; 高さ: 200px; 背景: コーラル; 位置: 絶対;左: 0; 上: 0;}
    .right {幅: 200px; 高さ: 200px; 背景: 水色; 位置: 絶対; 右: 0; 上: 0;}
    .middle {高さ: 200px; 背景: ライトピンク; 余白: 0 200px;}
</スタイル>

<div class="wrap">
    <p class="middle">私は真ん中にいるので、マージンを使用して、左右に配置された 2 つの要素が占めるスペースをオフセットします</p>
    <p class="left">私は左側にいます。私は位置指定された要素です</p>
    <p class="right">私は右側にいます。私は配置された要素です</p>
</div>

原理：

左と右の要素はどこにでも配置できます。
中央の要素ではmargin: 0 200pxを使用して、コンテンツが左右に配置された 2 つの要素の下に隠れないようにします。

フレックス

<スタイル タイプ="text/css">
    .wrap {背景: #eee; 表示: flex}
    p {マージン: 0; }
    .left {幅: 200px; 高さ: 200px; 背景: コーラル; }
    .right {幅: 200px; 高さ: 200px; 背景: ライトブルー; }
    .middle {高さ: 200px; 背景: ライトピンク; flex: 1;}
</スタイル>

<div class="wrap">
    <p class="left">私は左側です</p>
    <p class="middle">私は真ん中にいます。flex: 1 は残りのスペースを自動的に占有します</p>
    <p class="right">私は右側にいます</p>
</div>

原理：