一、两侧定宽中间自适应布局
思路一: float
【1】float + margin + calc
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{overflow:hidden;}.left,.rightright{float:left;width:100px;}.center{float:left;width:calc(100%-240px);margin:020px;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p></div></div>【2】float + margin + (fix)
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{overflow:hidden;}.left,.rightright{position:relative;float:left;width:100px;}.centerWrap{float:left;width:100%;margin:0-100px;}.center{margin:0120px;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="centerWrap"style="background-color:red;"><divclass="center"style="background-color:pink;"><p>center</p><p>center</p></div></div><divclass="right"style="background-color:lightgreen;"><p>right</p></div></div>思路二: inline-block
【1】inline-block + margin + calc
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{font-size:0;}.left,.rightright,.center{display:inline-block;vertical-align:top;font-size:16px;}.left,.rightright{width:100px;}.center{width:calc(100%-240px);margin:020px;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p></div></div>【2】inline-block + margin + (fix)
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{font-size:0;}.left,.rightright,.centerWrap{display:inline-block;vertical-align:top;font-size:16px;}.left,.rightright{width:100px;position:relative;}.centerWrap{width:100%;margin:0-100px;}.center{margin:0120px;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="centerWrap"style="background-color:orange;"><divclass="center"style="background-color:pink;"><p>center</p><p>center</p></div></div><divclass="right"style="background-color:lightgreen;"><p>right</p></div></div>思路三: table
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{display:table;width:100%;table-layout:fixed;}.left,.rightright,.centerWrap{display:table-cell;}.left,.rightright{width:100px;}.center{margin:020px;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="centerWrap"style="background-color:orange;"><divclass="center"style="background-color:pink;"><p>center</p><p>center</p></div></div><divclass="right"style="background-color:lightgreen;"><p>right</p></div></div>思路四: absolute
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{position:relative;height:40px;}.left,.rightright,.center{position:absolute;}.left{left:0;width:100px;}.rightright{rightright:0;width:100px;}.center{left:120px;rightright:120px;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p></div></div>思路五: flex
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{display:flex;}.left,.rightright{width:100px;}.center{flex:1;margin:020px;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p></div></div>二、两列定宽一侧自适应布局
这种布局与单列定宽单列自适应布局非常相似
思路一: float
【1】float + margin
缺点是IE6-浏览器的3px的bug，以及当自适应列中有元素清除浮动时，会使该元素不与左侧浮动元素同行，从而出现文字下沉现象
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{overflow:hidden;}.left,.center{float:left;width:100px;margin-right:20px;}.rightright{margin-left:240px;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>【2】float + margin + calc
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{overflow:hidden;}.left,.center{float:left;width:100px;margin-right:20px;}.rightright{float:left;width:calc(100%-240px);}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>【3】float + margin + (fix)
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{overflow:hidden;}.left,.center{position:relative;float:left;width:100px;margin-right:20px;}.rightWrap{float:left;width:100%;margin-left:-240px;}.rightright{margin-left:240px;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p></div><divclass="rightWrap"><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div></div>【4】float + overflow
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{overflow:hidden;}.left,.center{position:relative;float:left;width:100px;margin-right:20px;}.rightright{overflow:hidden;zoom:1;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>思路二: inline-block
【1】inline-block + margin + calc
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{font-size:0;}.left,.rightright,.center{display:inline-block;vertical-align:top;font-size:16px;}.left,.center{width:100px;margin-right:20px;}.rightright{width:calc(100%-240px);}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>【2】inline-block + margin + (fix)
XML/HTML Code复制内容到剪贴板
<style>p{margin:0;}.parent{font-size:0;}.left,.rightWrap,.center{display:inline-block;vertical-align:top;font-size:16px;}.left,.center{position:relative;width:100px;margin-right:20px;}.rightWrap{width:100%;margin-left:-240px;}.right{margin-left:240px;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p></div><divclass="rightWrap"style="background-color:green;"><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div></div>思路三: table
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{display:table;width:100%;table-layout:fixed;}.leftWrap,.centerWrap,.rightright{display:table-cell;}.leftWrap,.centerWrap{width:120px;}.left,.center{margin-right:20px;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="leftWrap"><divclass="left"style="background-color:lightblue;"><p>left</p></div></div><divclass="centerWrap"><divclass="center"style="background-color:pink;"><p>center</p></div></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>思路四: absolute
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{position:relative;width:100%;height:40px;}.left{position:absolute;left:0;width:100px;}.center{position:absolute;left:120px;width:100px;}.rightright{position:absolute;left:240px;rightright:0;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>思路五: flex
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{display:flex;}.left,.center{width:100px;margin-right:20px;}.rightright{flex:1;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>三、中间定宽两侧自适应布局
思路一: float
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{overflow:hidden;}.left{float:left;margin-right:20px;}.center{float:left;width:100px;margin-right:20px;}.rightright{overflow:hidden;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>思路二: table
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{display:table;width:100%;}.leftWrap{display:table-cell;width:0.1%;}.centerWrap{display:table-cell;width:120px;}.left,.center{margin-right:20px;}.rightright{display:table-cell;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="leftWrap"><divclass="left"style="background-color:lightblue;"><p>left</p><p>left</p></div></div><divclass="centerWrap"><divclass="center"style="background-color:pink;"><p>center</p></div></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>思路三: flex
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{display:flex;}.left{margin-right:20px;}.center{width:100px;margin-right:20px;}.rightright{flex:1;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>四、一侧定宽两列自适应布局
思路一: float
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{overflow:hidden;}.left{float:left;width:100px;margin-right:20px;}.center{float:left;margin-right:20px;}.rightright{overflow:hidden;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>
思路二: table
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{display:table;width:100%;}.leftWrap{display:table-cell;width:120px;}.centerWrap{display:table-cell;width:0.1%;}.left,.center{margin-right:20px;}.rightright{display:table-cell;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="leftWrap"><divclass="left"style="background-color:lightblue;"><p>left</p></div></div><divclass="centerWrap"><divclass="center"style="background-color:pink;"><p>center</p><p>center</p></div></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>思路三: flex
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{display:flex;}.left{width:100px;margin-right:20px;}.center{margin-right:20px;}.rightright{flex:1;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>五、三列自适应布局
思路一: float
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{overflow:hidden;}.left,.center{float:left;margin-right:20px;}.rightright{overflow:hidden;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>思路二: table
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{display:table;width:100%;}.leftWrap,.centerWrap{display:table-cell;width:0.1%;}.left,.center{margin-right:20px;}.rightright{display:table-cell;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="leftWrap"><divclass="left"style="background-color:lightblue;"><p>left</p><p>left</p></div></div><divclass="centerWrap"><divclass="center"style="background-color:pink;"><p>center</p><p>center</p></div></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>
思路三: flex
CSS Code复制内容到剪贴板
<style>p{margin:0;}.parent{display:flex;}.left,.center{margin-right:20px;}.rightright{flex:1;}</style>XML/HTML Code复制内容到剪贴板
<divclass="parent"style="background-color:lightgrey;"><divclass="left"style="background-color:lightblue;"><p>left</p><p>left</p></div><divclass="center"style="background-color:pink;"><p>center</p><p>center</p></div><divclass="right"style="background-color:lightgreen;"><p>right</p><p>right</p></div></div>
总结
三列布局类似于大号的两列布局。无论是什么布局方式，无外乎需要应用float、inline-block、table、absolute和flex这五种布局属性，然后再配合负margin、calc()函数、bfc、增加结构等来实现布局
自适应包括两种情况：一种是宽度由内容撑开，一种是宽度自动撑满父元素剩余宽度
可实现宽度由内容撑开的属性有： float、inline、inline-block、table、table-cell、absolute、fixed和flex
可实现宽度自动撑满父元素剩余宽度的属性有： overflow(配合float)、table、flex
原文链接：http://www.cnblogs.com/xiaohuochai/p/5455905.html
