CSS --- 两栏、三栏布局
本文主要总结了两栏布局(两列自适应、一列固定一列自适应)、三栏布局(两边固定中间自适应)的一些方法,以便遗忘时能方便查询。
一、两栏布局
1、两列自适应
两列自适应是特别简单的布局方式,其要点在于把列宽用百分百来表示,然后可以使用 float 或 display:inline-block 等方法来让两列处于同一行。不多说,直接上代码:
方法一:使用 float
<style> .outer{ background:green; padding-bottom:20px; } .left{ float:left; width:20%; height:100px; background:red; } .right{ float:right; width:77%; //使两列之间有一个间距 height:100px; background:pink; } </style> <body> <div class="outer"> <div class="left">列一</div> <div class="right">列二</div> </div>
优点:简单
缺点:两列都脱离了文档流,两列后面的内容或父盒子无法被撑起(上图中的绿色是父盒子),故需要清除浮动。
方法二:使用 display:inline-block
<style> .outer{ background:green; padding-bottom:20px; } .left{ display:inline-block; width:20%; height:100px; background:red; } .right{ display:inline-block; width:60%; //设置小方便观察 height:120px; background:pink; } </style> <body> <div class="outer"> <div class="left">列一</div> //这儿换行了,"列一" 和 "列二" 之间因换行形成了一个间隙 <div class="right">列二</div> </div> </body>
优点:不用考虑盒子脱离文档流的问题,父盒子总能被高的盒子撑起
缺点:需要考虑盒子的间距。
1:设置为 inline-block 的盒子因为上面注释处的换行而在浏览器渲染时形成了一个间隙(上图蓝色箭头处),故需要解决这个间隙问题。
2:如果要 “列一” 和 “列二” 之间有一个间距,则需要考虑 “列二” 宽度和间距大小的关系,可以与 margin 相结合来解决这个问题。
其他方法:
position:absolute ------ 问题与设置 float 类似。
2、一列固定一列自适应
这个布局方式也很简单,其实与上面的布局方式是相通的,方法特别多,但都是灵活的运用这几个属性。所以这儿示例以 margin、BFC来实现的布局方式。
方法一:margin
<style> .outer{ margin-left:220px; //可以考虑margin-right:-220px;但需要和float联合使用 } .left{ float:left; width:200px; height:100px; background:red; } .right{ height:120px; background:pink; } </style> <body> <div class="left">列一</div> <div class="outer"> <div class="right">列二</div> </div> </body>
缺点:无论是设置margin-left,还是设置margin-right,“列一” 和 “列二” 至少有一个是脱离文档流了的。
方法二:BFC
<style> .left{ float:left; margin-right:20px; width:200px; height:100px; background:red; } .right{ overflow:hidden; //触发BFC height:120px; background:pink; } </style> <body> <div class="left">列一</div> <div class="right">列二</div> </body>
BFC清除浮动的原理可以点这儿。简单的说,就是触发 BFC 后盒子不会与 float 区域重叠,这个方法简单好用,是我目前比较喜欢的方法。
二、三栏布局
1、两边固定中间自适应
方法一:margin
<style> .outer{ width:100%; float:left; } .center{ height:100px; margin:0 60px; background:pink; } .left, .right{ float:left; width:50px; height:100px; background:red; } .left{ margin-left: -100%; } .right{ margin-left: -50px; } </style> <body> <div class="outer"> <div class="center">列二</div> </div> <div class="left">列一</div> <div class="right">列三</div> </body>
缺点:方法比较麻烦,需要嵌套额外的盒子,需要清除浮动
要点:注意三者在 HTML 中的顺序。
方法二:position
<style> body{ margin:0; } .center{ height:100px; margin:0 60px; background:pink; } .left, .right{ position:absolute; top:0; width:50px; height:100px; background:red; } .left{ left:0; } .right{ right:0; } </style> <body> <div class="left">列一</div> <div class="center">列二</div> <div class="right">列三</div> </body>
思路:中间盒子的 margin 配合两边盒子的绝对定位。
方法三:BFC
<style> .center{ overflow:hidden; height:120px; background:pink; } .left, .right{ width:50px; height:100px; background:red; margin:0 10px; } .left{ float:left; } .right{ float:right; } </style> <body> <div class="left">列一</div> <div class="right">列三</div> <div class="center">列二</div> </body>
要点:注意 “列一”、“列二”、“列三” 在 HTML 中的顺序。
(欢迎大家多多补充~)