ホームページ > 記事 > ウェブフロントエンド > 左右の列の幅は適応的で、中央の列の幅は固定です_html/css_WEB-ITnose
左右の列の幅は適応的で、中央の列の幅は固定です_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:41:191230ブラウズ
左と右の列の幅は適応的で、中央の列の幅は固定です:
中央の列の幅は固定で、左と右の列の幅は適応的です。 width は多くの Web ページで使用されており、優れた使用効果をもたらします。この効果を簡単に紹介します。
コード例は次のとおりです。
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">*{ margin:0; padding:0;}body { font-family:Verdana, Arial, Helvetica, sans-serif; min-width:620px;}#left,#right { float:left; width:50%; margin:0 0 0 -151px;}#innerLeft,#innerRight{ margin:0 0 0 151px; background-color:#efefef;}#middle { float:left; width:300px; background-color:#ccc;}.inner { padding:12px;}</style></head><body><div id="left"> <div id="innerLeft" class="inner">左栏</div></div><div id="middle"> <div id="innerMiddle" class="inner">中栏</div></div><div id="right"> <div id="innerRight" class="inner">右栏</div></div></body></html> 上記のコードは、この効果を調整できます。テスト用のウィンドウのサイズ この効果を実現する方法について簡単に説明します。
1. 実装原則:
1. 中央の列が幅300pxで左右の列の間に配置されます。
2. 次に、左列と右列の子 div の左マージンを 150px に設定し、左列と右列の内容が非親要素の「-150px マージン領域」に表示されるようにします。
上記の原理に基づいて、左右の列の中央の固定効果と幅の適応効果が実現されます。
2. 知識ポイントの説明:
1. 実装原則によれば、左右のマージンの値は -150px である必要がありますが、実際の値は IE6 および IE7 ブラウザーでは -151px ではないためです。幅のパーセンテージを適切に処理するのが理想的です。そのため、マージン サイズを 1 ピクセル増やしてください。そうしないと改行が発生する可能性があります。
元のアドレス: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/509.html
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。