2 列のレイアウトにおける 1 列の固定幅レイアウトと 1 列のアダプティブレイアウトに関する 5 つのアイデア_html/css

× Directory [1] float [2] inline-block [3] table [4] ABSOLUTE [5] flex

前の単語

アダプティブレイアウト手法といえば、単一列固定幅単一列アダプティブレイアウトは、最も一般的な基本レイアウトフォームです。この記事では、float、inline-block、table、absolute、flex の 5 つのアイデアからレイアウトを賢く実装する方法を詳しく説明します

アイデア 1: float

2 列レイアウトに関しては、最も一般的なものですそれを実現するには float を使用することです。フロートレイアウトの欠点は、フローティング後にテキストの折り返しやその他の効果が発生し、時間内にフロートをクリアする必要があることです。フローティング要素の高さが異なると、千鳥効果が発生する可能性があります

【1】float + margin

固定幅の列には float を使用し、アダプティブ列には計算されたマージンを使用します

<style>p{margin: 0;}.parent{overflow: hidden;zoom: 1;}.left{float: left;width: 100px;}    .right{margin-left: 120px;}</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>

ログイン後にコピー

[欠点 1] IE6 ブラウザには 3 ピクセルのバグがあり、これは特に右側のテキストの最初の行が右に 3 ピクセルオフセットされるという事実に反映されます。解決策は、左側の要素に margin-right を設定することです: -100px

[欠点 2] 右側のコンテナ内の要素がフローティングから解除されると、要素は左側のフローティング要素と一緒にならず、テキストが表示されなくなります。現象

【2】float + margin + (fix)

(fix) は、上記の方法の 2 つの欠点を解決するために、構造体を追加することで実現できます。アダプティブ列の外側に構造体 .rightWrap のレイヤーを追加し、それを float に設定します。適応効果を実現するには、.rightWrap 幅を 100% に設定する必要があります。設定されていない場合、float の後の要素の幅はコンテンツによって引き伸ばされます。同時に、ボックスモデル属性の計算と合わせて、2列の要素が同一行に表示されるように、計算されたマイナスマージン値を設定します。同時に、2 つの列間の間隔は .right のマージン値によって決まります。右要素を左要素に重ねるため、.leftはrelativeを使ってレベルを上げる必要があります

<style>p{margin: 0;}.parent{overflow: hidden;zoom: 1;}.left{position: relative;float: left;width: 100px;}    .rightWrap{float: left;width: 100%;margin-left: -100px;}.right{margin-left: 120px;}</style>

ログイン後にコピー

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

ログイン後にコピー

【3】float + margin + calc

構造体を追加する方法に加えて、calc()を使用することもできます

[注意] IE8-、android4.3-、IOS5.1-はサポートされていません、android4.4以降は加算と減算の操作のみをサポートします

<style>p{margin: 0;}.parent{overflow: hidden;zoom: 1;}.left{float: left;width: 100px;margin-right: 20px;}    .right{float: left;width: calc(100% - 120px);}</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>

ログイン後にコピー

【 4】float + overflow

overflow 属性を使用して BFC をトリガーし、フローティングによるテキストの折り返し効果を防ぐこともできます。オーバーフローを使用しても要素の幅属性は変更されないため、幅をリセットする必要はありません。 overflow:hidden を設定しても IE6 ブラウザの haslayout 属性はトリガーされないため、IE6 ブラウザと互換性を持たせるためにzoom:1 を設定する必要があります

<style>p{margin: 0;}.parent{overflow: hidden;zoom: 1;}.left{ float: left;width: 100px;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: inline-block

inline -block インラインブロックレイアウトの主な欠点は、垂直方向の位置合わせ方法vertical-align を設定する必要があり、改行文字がスペースに解析されるというギャップの問題に対処する必要があることです。 IE7 ブラウザでは、ブロックレベル要素の inline-block 属性の設定はサポートされていません。互換性のあるコードは、display:inline;zoom:1;

【1】inline-block + margin + calc

一般的に、 inline-blockの問題要素間の隙間問題は、親要素でfont-sizeを0にして、子要素でfont-sizeをデフォルトサイズに設定してください

【注意】IE8-、android4.3-、IOS5 .1-はサポートされていません、android4.4以降は加算と減算のみをサポートします

<style>p{margin: 0;}.parent{font-size: 0;}.left{display:inline-block;vertical-align:top;width:100px;margin-right:20px;font-size:16px;}.right{display:inline-block;vertical-align:top;width:calc(100% - 120px);font-size:16px;}</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】inline-block + margin + (fix)

<style>p{margin: 0;}.parent{font-size: 0;}.left{position:relative;display:inline-block;vertical-align:top;width:100px;font-size:16px;}.rightWrap{display:inline-block;vertical-align:top;width:100%;margin-left: -100px;font-size:16px;}.right{margin-left: 120px;}</style>

ログイン後にコピー

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

ログイン後にコピー

アイデア 3: table

テーブルレイアウトを使用する欠点は、要素を table に設定した後、コンテンツの幅が拡張されるため、width: 100% を設定する必要があることです。 IE7 ブラウザと互換性を持たせるには、構造に変更する必要があります。テーブルセル要素にはマージンを設定できないため、要素間の間隔を設定する必要がある場合は、構造体を追加する必要があります

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

ログイン後にコピー

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

ログイン後にコピー

アイデア 4: 絶対

絶対レイアウトの欠点は次のとおりです。親要素はrelativeに設定する必要があり、子要素はabsoluteに設定する必要があるため、親要素の高さは子要素ではサポートされていないため、個別に設定する必要があります。

[注意] IE6 - 同時に相対オフセットプロパティの設定をサポートしていません

<style>p{margin: 0;}.parent{position: relative;width:100%;height:40px;}.left{position: absolute;left:0;width:100px;}.right{position: absolute;left:120px;right:0;}</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>

ログイン後にコピー

アイデア5: flex

フレックスボックスモデルは非常に強力なレイアウト方法です。ただし、パフォーマンスの消費が大きいため、ローカルおよび小規模のレイアウトに適しています

[注意] IE9 はサポートしていません

<style>p{margin: 0;}.parent{display: flex;}.left{width:100px;margin-right: 20px;}.right{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>

ログイン後にコピー