2 列アダプティブレイアウトの 3 つのアイデア_html/css_WEB-ITnose

× Directory [1] float [2] table [3] flex

前に述べたように

すでに、単一列固定幅単一列アダプティブ 2 列レイアウト、および 2 列レイアウトを導入しました。アダプティブ レイアウトとは、展開されたコンテンツで構成される列を指し、別の列がレイアウトの残りの幅を埋めます。この記事では、float、table、flex から 2 列アダプティブ レイアウトの 3 つのアイデアを紹介します。

アイデア 1: float

1 列固定幅と 1 列適応型の 2 列レイアウトでは、レイアウト効果を実現するために、float と負のマージンがよく使用されます。ただし、マージン値は固定値のみであるため、両方の列が適応型であるレイアウトには適用できません。 float と overflow を組み合わせると、2 列の適応効果を実現できます。 overflow 属性を使用して bfc をトリガーし、フローティングによるテキストの折り返し効果を防ぎます。 overflow:hidden を設定しても IE6-browser の haslayout 属性はトリガーされないため、IE6-browser と互換性を持たせるためにzoom:1 を設定する必要があります

<style>p{margin: 0;}.parent{overflow: hidden;zoom: 1;}.left{float: left;margin-right: 20px;}    .right{overflow: hidden;zoom: 1;}</style>

<div class="parent" style="background-color: lightgrey;">    <div class="left" style="background-color: lightblue;">        <p>left</p>    </div>    <div class="right"  style="background-color: lightgreen;">        <p>right</p>        <p>right</p>    </div>        </div>

アイデア 2: table

If table要素 table-layout:fixed が設定されていない場合、幅はコンテンツによって引き伸ばされます。特定の table-cell 要素の外側に div のレイヤーをネストし、width: 0.1% などの十分小さな幅を設定します

<style>p{margin: 0;}.parent{display:table;width:100%;}.leftWrap{display:table-cell;width:0.1%;}.left{margin-right: 20px;}    .right{display:table-cell;}</style>

<div class="parent" style="background-color: lightgrey;">    <div class="leftWrap" style="background-color: pink;">        <div class="left" style="background-color: lightblue;">            <p>left</p>        </div>            </div>    <div class="right"  style="background-color: lightgreen;">        <p>right</p>        <p>right</p>    </div>        </div>

3 つのアイデア: flex

フレックス ボックス モデルは非常に強力ですレイアウト方法。基本的には一般的なレイアウト方法が実現可能です

【注意】IE9はサポートしておりません

<style>p{margin: 0;}.parent{display:flex;}  .right{margin-left:20px; flex:1;}</style>

<div class="parent" style="background-color: lightgrey;">    <div class="left" style="background-color: lightblue;">        <p>left</p>    </div>            <div class="right"  style="background-color: lightgreen;">        <p>right</p>        <p>right</p>    </div>        </div>