三栏布局(中间定宽两边自适应 和 两边定宽中间自适应)

目录

三栏布局

一. 两边定宽中间自适应

1.flex布局

2.浮动 + margin

3.浮动 + calc()

4.定位

 5.表格布局

6.网格布局

7.圣杯布局

8.双飞翼布局

二. 中间定宽两边自适应

1.flex布局

2.浮动布局

3.margin负值

4.display:-webkit-box;


三栏布局

一. 两边定宽中间自适应

1.flex布局

left
center
right

2.浮动 + margin

  
left
right
center

3.浮动 + calc()

  
left
center
right

4.定位

  
left
center
right

 5.表格布局

  
left
center
right

6.网格布局

  
left
center
right

7.圣杯布局

  
头部
主区域(优先加载)
左区域
右区域

8.双飞翼布局

  
头部
主区域(优先加载)
左区域
右区域

二. 中间定宽两边自适应

1.flex布局

2.浮动布局

  
left
center
right

3.margin负值

  

4.display:-webkit-box;

  
left
center
right

你可能感兴趣的:(css)