圣杯布局
圣杯布局是一种三列布局,两边定宽,中间宽度自适应
圣杯布局可以将整个div.container看做一个奖杯,div.left和div.right看做奖杯的两个耳朵
圣杯布局的原理就是当子元素处于浮动状态时,设置负margin,子元素会叠盖到兄弟元素之上
方法一:利用 BFC 元素与浮动元素不会相互覆盖的特性,实现圣杯布局
三个盒子都加上背景色,方便观察,两边固定宽度,左边左浮动,右边右浮动,中间创建 BFC
圣杯布局
圣杯布局是一种三列布局,两边定宽,中间宽度自适应
圣杯布局可以将整个div.container看做一个奖杯,div.left和div.right看做奖杯的两个耳朵
圣杯布局的原理就是当子元素处于浮动状态时,设置负margin,子元素会叠盖到兄弟元素之上
方法一:利用 BFC 元素与浮动元素不会相互覆盖的特性,实现圣杯布局
三个盒子都加上背景色,方便观察,两边固定宽度,左边左浮动,右边右浮动,中间创建 BFC