左右幅固定ミドルアダプティブHTMLレイアウトソリューションの詳細説明

この記事では、次のように、左右幅固定中央 html">アダプティブ html レイアウト ソリューションの詳細な説明を紹介し、皆さんと共有します。

htmlの構造は次のとおりです

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> // まずここに注意してください左右のフローティング要素は、中央の要素がレンダリングされる前にレンダリングされます。要素がフローティングされた後、残りの兄弟ブロックレベル要素は親要素の幅を占めます。 <style> .box{ height:200px; } .right{ float:right; ;幅:300ピクセル;

htmlの構造は次のとおりです

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> // フローティング レイアウトと同じ、まず、左要素と右要素が親要素の左端と右端に配置されるようにレンダリングし、残りの中央要素が親要素の残りの幅を占めるようにします。 <スタイル> .box{ 位置: 相対; } .left{ 位置: 絶対; 左: 0; } .center{ 位置: 100 ピクセル; ; 背景: 赤;

親要素display:tableと子要素display:table-cellを置くとインラインブロックになります。

このレイアウトの利点は、互換性が高いことです。

 <div class=box> <div class=left> 左 </div> <div class=center> 中央 </div> <div class=right> 右 </div></div><style> .box{ 表示: テーブル; 幅: 100%; } .left{ ディスプレイ: テーブルセル; 左: 0; } .right{ ディスプレイ: テーブルセル; 100%; 背景: 赤;

親要素の表示: flex 子要素はすべて 1 行に配置されます。

子要素の flex:n の幅は、親要素の幅/n になります。

たとえば、flex:1 の場合、幅は親要素の高さと同じになります。

エラスティック レイアウトの欠点は、互換性が高くないことです。現在、IE ブラウザではエラスティック レイアウトを使用できません。

 <div class=box> <div class=left> 左 </div> <div class=center> 中央 </div> <div class=right> 右 </div></div><style> .box{ 表示: フレックス; 幅: 100%; .left{ 幅: 100px; } .center{ }</style>

親要素の表示:グリッド;

グリッド テンプレート列:100 ピクセル自動 100 ピクセル;

順番に、最初の子要素の幅は 100 ピクセル、2 番目の子要素はアダプティブ、3 番目の子要素は 100 ピクセルです。

グリッド レイアウトの利点は、非常にシンプルであり、親要素のスタイルによって直接決定されることです。欠点は、互換性が高くないことです。

 <div class=box> <div class=left> 左 </div> <div class=center> 中央 </div> <div class=right> 右 </div></div><style> .box{ 表示: グリッド; グリッドテンプレート列: 100px 自動幅: 100%;

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。