CSS は右側に固定幅、左側に適応幅を実装します_html/css_WEB-ITnose

その逆も可能です。左側の幅は固定で、右側の幅は適応的です。左右に関係なく、片側は幅が固定され、もう一方は幅が適応されます。

この種のレイアウトは比較的一般的で、ブログパークの多くのデフォルトテーマはこのようなものです。一般的にこのレイアウトの固定幅領域がサイドバー、アダプティブ領域がメインコンテンツ領域ということになると思いますが、サイドバーをアダプティブにする人は少ないのではないでしょうか？

このレイアウトの実装は比較的簡単です。まず HTML 構造を与えましょう:

<div id="wrap">  <div id="sidebar" style="height:240px;">固定宽度区</div>  <div id="content" style="height:340px;">自适应区</div></div><div id="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形</div>

コード内の #wrap div は、位置を特定したい 2 つの領域をラップするために使用されます。その後ろには、完了後に前の位置をテストするための #footer もあります。次の div は位置がずれていますか? 位置がずれている場合は、位置決め方法を改善する必要があることがわかります。

一般的な方法をいくつか示します:

1. 固定幅領域はフローティングで、適応領域は幅を設定せずにマージンを設定します

例として、右側の固定幅と左側の適応領域を取り上げます。 CSS コードは次のとおりです。

#wrap {    overflow: hidden; *zoom: 1;  }  #content ,#sidebar {    background-color: #eee;   }  #sidebar {    float: right; width: 300px;  }  #content {    margin-right: 310px;  }  #footer {background-color: #f00;color:#fff; margin-top: 1em}

その中で、サイドバーはフローティングで幅が設定されていますが、コンテンツには幅が設定されていません。

HTML では div タグを使用する必要があることに注意し、目的を達成するために p タグを使用しようとしないでください。 div にはデフォルト属性があるため、幅が設定されていない場合は、親タグの幅が自動的に埋められます。ここでの内容は一例です。

もちろん、一度埋めてしまうと、サイドバーと同じ行に留まることはできません。私たちは彼にマージンを設けた。サイドバーは右側にあるため、コンテンツの右マージンの値をサイドバーの幅よりわずかに大きい値に設定して、範囲を区別します。この例では 310 です。

コンテンツのデフォルトの幅が 100% であると仮定すると、マージンを設定すると、その幅は 100%-310 になります。このとき、コンテンツは幅を押し込めることがわかります。サイドバーと同じ行で、彼が現れました。

幅は親タグに対して 100% です。親タグの幅を変更すると、コンテンツの幅も変更されます。たとえば、ブラウザのウィンドウを縮小すると、ラップの幅も変更されます。が小さくなると、コンテンツの幅も小さくなります?? ただし、実際の幅は 100%-310 のままです。

この方法は、フロートをクリアする (ここでは最も簡単な方法を使用しました) を忘れない限り、フッターの位置がずれることはありません。そして、コンテンツとサイドバーのどちらが長くても、レイアウトには影響しません

しかし、実際には、この方法には非常に古い制限があり、HTML では、サイドバーはコンテンツの前になければなりません。

しかし、コンテンツの後にサイドバーが必要です!私のコンテンツは Web ページのメイン コンテンツであるため、メイン コンテンツが二次コンテンツの後に順位付けされることは望ましくありません。

しかし、サイドバーがコンテンツの後にある場合、その上にあるものはすべて無駄になります。

2. 標準的なブラウザの方法

もちろん、人々に迷惑をかけない w3c 標準は、この種の適応幅を作成するための標準的な方法を長い間提供しています。それは簡単です。wrap を display:table に設定し、幅を 100% に指定し、次に content+sidebar を display:table-cell に設定します。その後、サイドバーの幅のみを指定すると、コンテンツの幅がアダプティブになります。

コードは非常に少なく、余分なタグはありません。ただし、この方法は IE7 では無効です。