css三栏布局：左右固定宽中间自适应

圣杯布局

直接上代码：
html:

<div class="container>
   <div class="middle"></div>
   <div class="left"></div>
   <div class="right"></div>
</div>

css:

.middle,.left,.right {float: left; position: relative;}
.middle {width: 100%;}
.left {margin-left: -100%; width: 220px; left: -220px;}
.right {margin-left: -220px; width: 220px;right: -220px;}
.container {padding: 0 220px 0 220px}

双飞翼布局

html:

   <div class="middle">
     <div class="middle-inner></div>
   </div>
   <div class="left"></div>
   <div class="right"></div>

css:

.middle,.left,.right {float: left;}
.middle {width: 100%;}
.left {margin-left: -100%; width: 220px; }
.right {margin-left: -220px; width: 220px;}
.middle-inner {margin-left: 220px;margin-right: 220px;}

自身浮动法

html:

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

css:

.left,.right,.middle {min-height: 200px}
.left {width: 220px; float: left;  border:1px solid red; }
.right {width: 160px; float: right;  border:1px solid blue; }
.middle {margin-left: 250px; margin-right: 180px;  border:1px solid green; }

绝对定位法

html:

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

css:

.left,.right{position: absolute;top: 0;width: 220px;min-height: 130px}
.left {left: 0;}
.right {right: 0;}
.middle {margin:0 220px 0 220px; min-height: 130px}

原文地址：https://www.cnblogs.com/jlfw/p/12556097.html