CSS三列自适应布局

转自：http://www.cnblogs.com/xiaohuochai/p/5455905.html

前面的话

　　前面已经介绍过单列定宽单列自适应和两列自适应的两列布局。本文介绍三列布局，分为两侧定宽中间自适应、两列定宽一侧自适应、中间定宽两侧自适应、一侧定宽两列自适应和三列自适应这五种情况

 

两侧定宽中间自适应布局

思路一:  float

【1】float + margin + calc

<style>
p{
   margin: 0;}
.parent{
   overflow: hidden;}
.left,.right{
   float: left;width: 100px;}
.center{
   float: left; width:calc(100% - 240px);margin: 0 20px;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>    
    <div class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </div>    
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
    </div>        
</div>

【2】float + margin + (fix)

<style>
p{
   margin: 0;}
.parent{
   overflow: hidden;}
.left,.right{
   position: relative;float: left;width: 100px;}
.centerWrap{
   float: left; width:100%; margin: 0 -100px;}
.center{
   margin: 0 120px;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>            
    <div class="centerWrap" style="background-color: red;">
        <div class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </div>        
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
    </div>            
</div>

 

思路二: inline-block

【1】inline-block + margin + calc

<style>
p{
   margin: 0;}
.parent{
   font-size: 0;}
.left,.right,.center{
   display:inline-block; vertical-align: top;font-size: 16px;}
.left,.right{
   width: 100px;}
.center{
   width: calc(100% - 240px); margin: 0 20px;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>            
    <div class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </div>        
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
    </div>            
</div>

【2】inline-block + margin + (fix)

<style>
p{
   margin: 0;}
.parent{
   font-size: 0;}
.left,.right,.centerWrap{
   display:inline-block; vertical-align: top;font-size: 16px;}
.left,.right{
   width: 100px;position:relative;}
.centerWrap{
   width: 100%; margin: 0 -100px;}
.center{
   margin: 0 120px;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>    
    <div class="centerWrap" style="background-color: orange;">
        <div class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </div>        
    </div>        
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
    </div>            
</div>

 

思路三: table

<style>
p{
   margin: 0;}
.parent{
   display: table; width: 100%;table-layout: fixed;}
.left,.right,.centerWrap{
   display:table-cell;}
.left,.right{
   width: 100px;}
.center{
   margin: 0 20px;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>    
    <div class="centerWrap" style="background-color: orange;">
        <div class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </div>        
    </div>        
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
    </