经典的流式布局实现方法总结(三)(圣杯布局&双飞翼布局)

两侧固定中间自适应的三种实现方法

1.利用bfc块级格式化上下文, 实现两侧固定中间自适应
(1)左右固定宽高,进行浮动
(2)中间 overflow: hidden;


html结构

 
 

2.利用定位实现两侧固定中间自适应
(1)父盒子设置左右padding值
(2)给左右盒子的width设置父盒子的padding值,然后分别定位到padding处.
(3)中间盒子自适应

具体css代码


html结构

3.利用flex布局实现两侧固定中间自适应
(1) 父盒子设置display:flex;
(2) 左右盒子设置固定宽高
(3) 中间盒子设置flex:1 ;


html结构

等分布局

具体css代码


html结构

你可能感兴趣的:(前端知识点总结)