三种方法实现三栏网页宽度自适应布局，附加一个右边为自适应的样式。

今天来练习并总结下三种布局方式来实现三栏式布局。

以下为三种方式的html布局：

    <!--方法一-->
    <div id="content1">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <!--方法二-->
    <div id="content2">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="middle">middle</div>
    </div>
    <!--方法三-->
    <div id="content3">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>

方法一：三个盒子都向左浮动，左右的设置固定宽高，中间的宽为100%，利用负margin值将左右两个盒子顶到上面去，然后利用padding将中间盒子的文字挤出来。（这种方法可以优先渲染中间的盒子，即要在html结构中将middle放在最上面）

css代码如下：

#content1{height: 200px;margin:0 auto;width: 100%;}
#content1 .middle{
      height: 200px;width: 100%;background: green;text-align: center;float: left;
}
#content1 .left {
      height: 200px;width: 200px;float: left;
background: yellow;border:1px solid black;margin-left: -100%;/*这里设置负的100%的margin值，左边的盒子才会在中间盒子的左边，不然会被挤到下面去*/
 }
#content1 .right {
      height: 200px;background: red;width: 200px;float: left;

 border:1px solid black;text-align: right;margin-left: -200px;/*同理，右边盒子的负margin值为自身宽度才能保证在中间盒子的右边，不然也会被挤到下面去*/ }

方法二：左边的盒子左浮动，右边的盒子右浮动，并且设置固定宽高，中间的盒子宽度为100%。这种方法要把中间的盒子排列在html结构的最后，利用浮动后脱离文档流的特性，让最底下的middle盒子能够去占据原来左右盒子的位置，使得左右两个盒子能够分别左右浮动在middle的上面，达到中间盒子宽度自适应的效果。这个方法不需要用padding值来把middle的内容挤出来，因为有浮动的环绕效果。

css代码如下：

　　　　  #content2{height: 200px;margin:0 auto;width: 100%;}
        #content2 .middle{
            height: 200px;width: 100%;background: green;border:1px solid black;
        }
        #content2 .left {
            height: 200px;width: 200px;float: left;background: yellow;border:1px solid black;
        }
        #content2 .right {
            height: 200px;background: red;width: 200px;
            border:1px solid black;text-align: right;float: right;
        }

方法3:左右的盒子分别定位至左右，并设置固定宽度，中间盒子的宽度用到两边的外边距来撑开，左右外边距最好要分别大于等于两边盒子的宽度，这样可以保证middle的内容不会被覆盖。这种方法不需要设置浮动，代码较少，原理也相对较简单些。

css代码如下：

#content3 {height: 200px;margin:0 auto;width: 100%;position: relative;}
        
        #content3 .left {
            height:200px;width: 200px ;position: absolute;top: 0;left: 0;background: yellow;
        }
        #content3 .right {
            height:200px;width: 200px ;position: absolute;top: 0;right: 0;background: red;
        }
        #content3 .middle{
            margin:0px 210px;background: green;height: 200px;
        }

附加练习：左边的两个盒子固定宽度，最右边的自适应宽度。

方法：将左边和中间的浮动至左边并固定宽度，右边的宽度为100%

HTML代码如下：

<div id="content4">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

css代码如下：

        #content4 {height: 200px;margin:0 auto;width: 100%;}
        #content4 .left{
            height: 200px;width: 200px;float: left;background: yellow;
        }
        #content4 .middle {
            height: 200px;background: green;width: 200px;
            border:1px solid black: ;text-align: right;float: left;
        }
        #content4 .right{
            height: 200px;background: red;width: 100%;
        }