三列布局

情况一：两列定宽，一列自适应

1.使用float+margin

div设置float：left，left的div添加属性margin-right：left和center的间隔px,right的div添加属性margin-left：left和center的宽度

html
<div class='test'>
  <div class='c1'></div>
  <div class='c2'></div>
  <div class='c3'></div>
</div>

css
.floattest{
 width:375px;
 background:gray;
}
.c1{
 float:left;
 width:60px;
 height:100px;
 background:green;
 margin-right:20px;
}
.c2{
 float:left;
 width:60px;
 height:100px;
 background:red;
}
.c3{
 height:100px;
 background:yellow;
 margin-left:140px;
}

2、使用float+overflow：

左侧中间div设置float：left，再给right的div设置overflow:hidden。这样子两个盒子浮动，另一个盒子触发bfc达到自适应

其余代码同1
.c3{
 float:left;
 width:60px;
 height:100px;
 background:yellow;
 overflow:hidden;
}

3.使用position

父级div设置position：relative，三个子级div设置position：absolute，要计算好盒子的宽度和间隔去设置位置，不做举例。

4.使用table实现

html
<div class='threeColom'>
  <div class='t1'></div>
  <div class='t2'></div>
  <div class='t3'></div>
  <!--<div class='c4'></div>
  <div class="clearfloat"></div> -->
 </div>
 
 css
.threeColom{
 display:table;
 border-spacing:10px;
 width:375px;
 height:200px;
 background:gray;
}
.t1{
 width:60px;
 height:100px;
 background:green;
 display:table-cell;
}
.t2{
 display:table-cell;
 width:60px;
 height:100px;
 background:red;
}
.t3{
 display:table-cell;
 width:60px;
 height:100px;
 background:yellow;
 overflow:hidden;
}

5、flex实现：

parent的div设置display：flex；left和center的div设置margin-right；然后right 的div设置flex：1；

css
.threeColom{
 display:flex;
 width:375px;
 height:100px;
 background:gray;
}
.t1{
 width:60px;
 height:100px;
 background:green;
 margin-right:10px;
 
}
.t2{
 
 width:60px;
 height:100px;
 background:red;
 margin-right:10px;
}
.t3{
 flex:1;
 height:100px;
 background:yellow;
 overflow:hidden;
}

以上均可实现效果：

情况二：两边宽度固定，中间自适应。中间内容完全展示。

1.使用相对定位+绝对定位

.threeColom{
 position:relative;
 width:375px;
 height:100px;
 background:gray;
}
.t1{
 width:60px;
 height:100px;
 background:green;
 position:absolute;
 left:0;
}
.t2{
 padding:0 60px;
 height:100px;
 background:red; 
}
.t3{
 position:absolute;
 height:100px;
 background:yellow;
 right:0;
 top:0;
 width:60px;
}

2.使用浮动

在这里插入代码片
html
<div class='threeColom'>
  <div class='t1'></div>
  
  <div class='t3'></div>
  <div class='t2'></div>
</div>

css
.threeColom{
 width:375px;
 height:100px;
 background:gray;
}
.t1{
 width:60px;
 height:100px;
 background:green;
 float:left;
}
.t3{
 height:100px;
 background:yellow;
 float:right;
 width:60px;
}
.t2{
 padding:0 60px;
 height:100px;
 background:red;
}

这种方法必须要求中间部分元素放在左右两边的DOM元素之后，从而导致中间主内容最后显示的问题。

解决办法：

1.双飞翼布局

在这里插入代码片
html
<div class='threeColom'>
  <div class='t2'>
   <div class='main'>main</div>
  </div>
  <div class='t1'></div>
  <div class='t3'></div>
</div>
<div class='footer'></div>
css
.threeColom{
 width:375px;
 height:100px;
 background:gray;
}
.threeColom>div{
 float:left;
}
.t1{
 width:60px;
 height:100px;
 background:green;
 margin-left: -100%;
}
.t3{
 height:100px;
 background:yellow;
 margin-left: -60px;
 width:60px;
}
.t2{
 width:100%;
 height:100px;
 background:red;
}
.main{
 margin:0 60px;
 height:100%
}
.footer{
 clear:both;
}

2.圣杯布局

html
<div class='threeColom'>
  <div class='t2'>
  </div>
  <div class='t1'></div>
  <div class='t3'></div>
</div>
<div class='footer'></div>

css
body{
 min-width:180px;
}
.threeColom{
 height:100px;
 background:gray;
 padding:0 60px;
}
.threeColom>div{
 float:left;
}
.t1{
 width:60px;
 height:100px;
 background:green;
 margin-left: -100%;
 position:relative;
 left:-60px;
}
.t3{
 height:100px;
 background:yellow;
 margin-right: -60px;
 width:60px;
}
.t2{
 width:100%;
 height:100px;
 background:red;
}
.footer{
 clear:both;
}

3.flex法

html
<div class='threeColom'>
  <div class='t2'>
  </div>
  <div class='t1'></div>
  <div class='t3'></div>
</div>
<div

css
.threeColom {
    display: flex;
 height:100px;
 background:gray;
}
.t2 {
    flex: 1;
 background:red;
}
.t1 {
    flex: 0 0 60px;
    order: -1;
 background:green;
}
.t3 {
    flex: 0 0 60px;
 background:yellow;
}

以上均能实现效果：

参考文章：圣杯布局和双飞翼布局的理解与思考