html css实现圣杯布局和双飞翼布局（源码）

一、圣杯布局(两边固定，中间自适应）

html:

          <div class="container">

            <div class="middle">middle</div>

            <div class="left">left</div>

           <div class="right">right</div>

         </div>

css:

*{

   margin:0;

   padding:0;

}

.container{

    padding:0 100px 0 200px;

    overflow：hidden;

}

.left,.middle,.right{

   position:relative;

   float:left;

  min-height:200px;

}

.left{

  margin-left:-100%;

  left:-200px;

  width:200px;

  background:#ccc

}

.middle{

  width:100%;

  background:red;

}

.right{

  margin-left:-100px;

  right:-100px;

  width:100px;

  background:green

}

二、双飞翼布局

html

   <div class="container">

        <div class="middle">

             <div class="middleInner">middle</div>

        </div>

       <div class="left"></div> 

      <div class="right"></div>

  </div>

css

    *{

       margin:0;

       padding:0;

    }

    .middle,.left,.right{

       float:left;

      min-height:200px;

   }

  .left{

     width:100px;

     margin-left:-100%;

    background:red;

  }

.right{

   width:200px;

   margin-left:-200px;

  background:blue;

}

.middle{

   width:100%

}

.middleInner{

     margin:0 200px 0 100px;

     min-height:200px;

    background:green;

}