CSS三列布局的多种表现形式_ Div+Css教程-查字典教程网
CSS三列布局的多种表现形式
CSS三列布局的多种表现形式
发布时间:2017-01-06 来源:查字典编辑
摘要:一、两侧定宽中间自适应布局思路一:float【1】float+margin+calcCSSCode复制内容到剪贴板p{margin:0;}....

一、两侧定宽中间自适应布局

思路一: 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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类