html--3段レイアウト(両側固定幅、中間適応)

一、絶対位置決め法:左右の2つの欄は絶対位置決めを採用し、それぞれページの左右に固定し、中間の本体欄は左右のmargin値で距離を広げる.そこで3つの欄の適応レイアウトを実現した.

     #left{
         width: 180px;
         height: 100%;      
         background: blue;
         position: absolute;
         left: 0px;
         top: 0px;
      }
      #middle{
           background: red;
           margin: 0 200px;
           height: 100%;

      }
      #right{
        width: 180px;        
         background: blue;
         position: absolute;
         right: 0px;
         top: 0px;
         height: 100%;    
      }

この方法の利点は,理解が容易で,扱いが簡単で,内部要素の影響でレイアウトを破壊する確率が低く,比較的振り回されることに耐えられることである.欠点は、中間バーに最小幅制限が含まれている場合や、幅の内部要素が含まれている場合、ブラウザの幅がある程度小さくなると、レイヤが重なる場合があります.
二、自己浮動法:左欄左浮動、右欄右浮動、中間欄を最後に置く.

#left{
         width: 180px;
         height: 100%;      
         background: blue;
         float: left;
      }
      #middle{
          background: red;
           margin: 0 200px;
           height: 100%;
      }
      #right{
         width: 180px;
         height: 100%;      
         background: blue;
         float: right;
      }

この方式では3つのdivの順序に注意し,左右の2つの欄の順序は前後を区別しないが,中間の1欄は最後に置かなければならない.この方法の利点は、コードが十分に簡潔で効率的であるという欠点であり、中間本体には克星が存在し、clear:both属性がある.この方法を使用する場合は、明らかなclearスタイルを避ける必要があります.
三、margin負値法:左右の2つの欄はいずれも左に浮動し、左右の2つの欄は負のmargin値を採用する.中間バーは、幅100%のフローティング要素で囲まれています.

 #middle{
            width: 100%;
            float: left;
       }
       #main{
            background: red;
            margin: 0 200px;
            height: 100%;
       }
       #left{
             width: 200px;
             float: left;
             margin-left: -100%;
             height: 100%;
             background:blue;

       }
         #right{
             width: 200px;
             float: left;
             margin-left: -200px;
             height: 100%;
             background:blue;

       }

この方法の利点は、3つの欄が相互に関連しており、本当の意味での適応と言え、一定の抵抗性がある--レイアウトは内部の影響を受けにくいことだ.欠点は、比較的理解しにくく、手がつけにくく、コードが複雑であることです.パーセント幅、負の値の位置付けが多すぎて、レイアウトのバグが発生した場合、チェックは容易ではありません.

          div  
<div id="middle">div>
<div id="left">xsxsxdiv>
<div id="right">xsxsxdiv>

      div  
<div id="middle">
        <div id="main">aaaaaaaaadiv>
   div>
   <div id="left">vvvvvvvvvvvdiv>
   <div id="right">cccccccccccccdiv>