今天小编跟大家讲解下有关CSS三列布局的多种表现形式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS三列布局的多种表现形式 的相关资料，希望小伙伴们看了有所帮助。
一、两侧定宽中间自适应布局
思路一: 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="back来源：爱蒂网
