转自: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> </