CSS三列布局的多种表现形式

时间:2021-05-08

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

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

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章