三栏布局
- 问：那什么叫做三栏布局呢？
- 答：一般将左右两栏固定，中间宽度自适应称为三栏布局
前言：一直说抽时间把三栏布局的代码总结一下，总一直没时间没时间，感觉自己犯了拖延症了，不能再拖了，再拖下去，都不知道啥时候才写这个呀！！！（怕不是真有拖延症了吧，快快行动起来）
本文规范：为了叙述方便，故以类名代表相应的元素
上课中：
第一种情况（定位：position）
- 利用绝对定位,左右两栏设置为绝对定位,中间设置对象方向的margin值
CSS代码
.outer{ position: relative; height: 100px; color: white; } .left, .right{ position: absolute; } .left{ width: 100px; height: inherit; background: rgb(177, 177, 226); } .center{ margin-left: 100px; margin-right: 200px; height: inherit; background: black; } .right{ top: 0; right: 0; width: 200px; height: inherit; background: tomato; }
HTML代码
- 结果
- 补充：定位为absolute的元素脱离文档流，不保留之前在文档流中的空间，他是浮在页面上，当与元素重叠时，默认在元素上边。
第二种情况（flex布局）
利用flex布局，中间使用（flex:1,其实使用的是flex-grow：占据剩余空间）
CSS代码
.outer{ height: 100px; display: flex; color: white; } .left{ width: 100px; background: rgb(177, 177, 226); } .right{ width: 200px; background: tomato; } .center{ flex-grow: 1; background: black; }
HTML代码
- 结果
第三种情况（浮动：float）
- 浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值。这种方式需要把中间一栏放到最后
CSS代码
height: 100px; color: white; font-size: 20px; } .left{ width: 100px; height: inherit; float: left; background: rgb(177, 177, 226); } .right{ float: right; width: 200px; height: inherit; background: tomato; } .center{ height: inherit; margin-left: 100px; margin-right: 200px; background: black; }
HTML代码
- 结果
第四种情况（圣杯布局）
- 补充：
- （margin：-100%直通车http://www.qiutianaimeili.com/html/page/2017/07/ggz1hvn43qi.html
CSS代码
.outer{ height: 100px; padding-left: 100px; padding-right: 200px; color: red; font-size: 20px; } /* 相对自己在页面一开始位置定位(有待考证) / / 上边因为已经被占满，所以自己被挤下来了 / .left{ position: relative; left: -100px; / 浮动没上去我认为是宽度不够 */ float: left; margin-left: -100%; width: 100px; height: 100px; background: tomato; } .right{ position: relative; left: 200px; float: right; margin-left: -200px; width: 200px; height: 100px; background: rgb(185, 156, 212); } .center{ float: left; width: 100%; height: 100px; background: black; }
HTML代码
- 结果
第五种情况（双飞翼布局）
CSS代码
.outer{ height: 100px; color: white; font-size: 20px; } .left{ float: left; margin-left: -100%; width: 100px; height: 100px; background: tomato; } .right { float: left; margin-left: -200px; width: 200px; height: 100px; background: gold; } .content{ margin-left: 100px; margin-right: 200px; height: inherit; } .center { float: left; width: 100%; height: 100px; background: lightgreen; }
HTML代码
- 结果
