左右の列の幅は適応的で、中央の列の幅は固定です_html/css

左右の列の幅は適応的で、中央の列の幅は固定です_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:41:19

オリジナル

1251 人が閲覧しました

左と右の列の幅は適応的で、中央の列の幅は固定です:
中央の列の幅は固定で、左と右の列の幅は適応的です。 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