css 複数列アダプティブレイアウト_html/css_WEB-ITnose

ページの再構築では、n 列の固定幅 + m 列の適応幅の組み合わせ、絶対レイアウト + パディング + パーセンテージ幅の組み合わせなど、より暴力的な解決策を簡単に考えることができますが、将来の「エンジニア」は、より洗練された方法を要求する必要があります。まず、2 列のレイアウトについて説明します。

<div class='container' >    <div class='div1' >1</div>    <div class='div2' >2</div></div>

図に示すように、コンテナー内に 2 つの子要素がある場合、要素 1 の幅を 200px にします。要素 2 の幅を変更して、コンテナの残りの幅をカバーします。より暴力的な方法は、前述した絶対レイアウト + パディング + パーセント幅です。

//暴力方法 绝对布局 + padding + 百分比.container{padding-left: 200px;position: relative;}.div1{height: 200px;position: absolute;left: 0;}.div2{width: 100%;}

私は例です。 , ここの.div2はブロックレベルの要素なので、widthを設定しなくても大丈夫です。

2番目の方法は、dom要素の特定の条件下で謎の「BFC」を使用してfloatを具​​体的にクリアする方法です。わからない場合は、検索してキーCSSに直接アクセスしてください

//优雅方法 float + BFC.div1{width:200px;float: left;}.div2{overflow: hidden;}

。

私は一例です。「私はどうですか

、私はもっとエレガントですか?」をクリックしてください。 .div1 の特定の幅がわかっている状況では、.div2 の BFC 機能をトリガーできないため、margin-left:200px を設定しても同じページ効果を実現できます。ただし、.div1 が変更された場合は、その設定が必要です。 .div2 の margin-left は手動で変更されますが、これは十分な柔軟性がありません。興味がある場合は、自分で試してみてください。

3 番目の方法は、伝説的な新世代レイアウトである css3 の flex レイアウト、つまり流体レイアウトを使用することです。原理は説明されていませんが、重要な css

//前卫方法 flex.container{display: flex;}.div1{width:200px;}.div2{flex:1;}

私はその一例です。 、 突いてください

これも非常に簡単ですか? もっと原理を知りたい場合は、マスターのブログを読むことをお勧めします。これは単なる知識をまとめた場所です。0.0、一部のブラウザーでは、フレックス レイアウトにプレフィックスが必要な場合があります。 http://pleeease.io/play/ にアクセスできます。 ブラウザーのプレフィックス (良いブックマーク) を自動的に追加します

4 番目の方法は、かつて「古代」にフロントエンド界で人気があったものです。テーブルのレイアウトはCSSを使用してください

//远古方法 table + table-cell.container{display:table;width: 100%;}.div1{width:200px;display: table-cell;}.div2{display:table-cell;}

私は一例です、私を突いてください

実際には非常に単純に見えます、笑。 。しかし、名前が十分に派手ではないため、または他の理由で他のレイアウト方法に置き換えられた可能性があります

上記の例はすべて 2 列のレイアウト用です。要件が 3 列以上ある場合は、float + を使用します。 BFC メソッド 残りの幅を適応的にカバーするために 1 つの列だけをクリアしてフローティングできるため、使用するのは簡単ではありません。固定幅の場合は幅を設定し、適応型の場合はフレックス レイアウトを使用することをお勧めします。 Flex 値に応じて設定すると、テーブルのレイアウトが十分に柔軟になりません。幅が設定されていない場合は、残りの幅が均等に分割されます。

上記を要約すると、flex は最も柔軟です。例えば、

要素を垂直方向と水平方向にセンタリングする

アイテムの整列justify-content は古いブラウザにもさまざまな記述方法がありますが、最新のブラウザのほとんどはこの記述方法をサポートしているため、使用する場合は http://pleeease.io/play/ と http://caniuse.com/ を確認する必要があります。

垂直マルチカラム アダプティブ レイアウトなどを確認してください

.container{ display:flex;            align-items: center;//子元素垂直居中            justify-content: center;//子元素水平居中　　　　　　}                

その他の素晴らしい使い方をゆっくり学び、間違いがあればご指摘ください

🎜🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜