ホームページ >ウェブフロントエンド >htmlチュートリアル >共通CSS水平アダプティブレイアウト_html/css_WEB-ITnose
共通CSS水平アダプティブレイアウト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:45:461350ブラウズ
-
BFC メソッドで解決します
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>div + css宽度自适应（液态布局）</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /*左边栏，设定宽度*/ body,#wrap{ width: 100%; border: 1px yellow; } .wrap_l { float: left; height: 150px; width: 150px; border: 1px solid #333; } /*中间栏，宽度auto,*/ .wrap_m { overflow: hidden; border: 1px solid #000; background: red; } </style></head><body> <div id="wrap"> <div class="wrap_l"> 这是左边部分<br /> 这是左边部分<br /> 这是左边部分 </div> <div class="wrap_m"> 这是中间部分 </div> </div></body></html>原則:
overflow: hidden;将div改变成BFC模型,display:block;标签的dom的宽度是自适应占满全部的
を左側に追加します -
処理するには、position:absolute; を使用します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>div + css宽度自适应（液态布局）</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /*左边栏，设定宽度*/ body,#wrap{ width: 100%; margin: 0px; border: 1px yellow; } .wrap_l { float: left; height: 150px; width: 150px; border: 1px solid #333; } /*中间栏，宽度auto,*/ .wrap_m { position:absolute; left:152px; right: 0px; border: 1px solid #000; background: red; } </style></head><body> <div id="wrap"> <div class="wrap_l"> 这是左边部分<br /> 这是左边部分<br /> 这是左边部分 </div> <div class="wrap_m"> 这是中间部分 </div> </div></body></html>
通常の要素は親要素に基づいて計算されません。親要素は通常、親の dom 要素に対して相対的なレイアウトになります。 postion:親のdom要素を相対的に相対化します
この書き方はie6以降に対応しています バージョンは
-
はテーブルレイアウトを使用します
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>div + css宽度自适应（液态布局）</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /*左边栏，设定宽度*/ html,body{ width: 100%; height: 100% } </style></head><body> <table style="width:100%;height:100%;background:red"> <tr> <td style="background:yellow;width:100px">我是左边</td><td style="background:blue">我是右边</td> </tr> </table></body></html>
テーブルレイアウトの実際の実装原理も一部設定されていますBFC の機能へ
-
display:table はテーブル レイアウトを模倣します
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>div + css宽度自适应（液态布局）</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /*左边栏，设定宽度*/ html,body{ width: 100%; height: 100% } #wrap{ width: 100%; height: 50%; display: table; } .wrap_l { height: 150px; width: 150px; display: table-cell; border: 1px solid #333; } /*中间栏，宽度auto,*/ .wrap_m { display: table-cell; border: 1px solid #000; background: red; } </style></head><body> <div id="wrap"> <div class="wrap_l"> 这是左边部分<br /> 这是左边部分<br /> 这是左边部分 </div> <div class="wrap_m"> 这是中间部分 </div></div> <table style="width:100%;height:50%;background:red"> <tr> <td style="background:yellow;width:100px">我是左边</td><td style="background:blue">我是右边</td> </tr> </table></body></html> - css3 ソリューション、主にフレキシブル ボックス モデルを使用します
<!DOCTYPE html><html ><head> <title>div + css宽度自适应（液态布局）</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /*左边栏，设定宽度*/ html,body{ width: 100%; height: 100% } #wrap{ display: flex; width: 100%; } .wrap_l { height: 150px; width: 150px; background: yellow; } /*中间栏，宽度auto,*/ .wrap_m { flex:1; background: blue; } </style></head><body> <div id="wrap"> <div class="wrap_l"> 这是左边部分<br /> 这是左边部分<br /> 这是左边部分 </div> <div class="wrap_m"> 这是中间部分 </div></div></body></html>
CSS3 は CSS2 で多くの面倒な問題を提供します。 3、それは、フレキシブルボックスモデルを提供します。以前のCSS3タグはdisplay:boxでしたが、新しいバージョンはflexです。その特徴は、サブエリアに任意の数の要素を追加し、それらを水平方向と垂直方向に並べ替えることです。ラベル flex: 1 を設定してパーセンテージを制御できます。水平ラベルは通常
flex-direction: column に設定されます。最新バージョンと互換性があります。古いバージョンは box-orient:horizontal です。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。