圣杯布局和双飞翼布局(我自己的理解)
圣杯布局和双飞翼布局 实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应
圣杯布局(要注意设置最小宽度)
这时候左右两边的盒子会盖住中间盒子的内容
给父级添加padding值 给左右两个盒子设置定位
另一种实现给中间的盒子左右加padding值 用来抵消左右两边盒子遮住的部分
增加了padding后 因为默认的box-sizing属性为content-box(在元素宽度和高度之内绘制内边距和外边距),所以当设置了左右的padding后 实际内容的宽度为(100%+左右padding的和),那原来的左右盒子的负margin就不对了,只要将box-sizing的值设置为border-box就好了。
效果图
双飞翼布局
双飞翼布局是在middle的div里又插入一个div,通过调整内部div的margin值,实现中间栏自适应,内容写到内部div中。
效果图