css布局两边固定中间自适应的五种方法




  
  
  
  css布局两边固定中间自适应
  



  

1、利用自身浮动

左右浮动两块div元素,脱离标准流,中间那块元素就会上去,跟他们一行,利用margin留出左右宽度

左边
右边
中间

2、利用绝对定位

左右绝对定位的两块div元素,脱离标准流,中间那块元素就会上去,跟他们一行,利用margin留出左右宽度

左边
右边
中间

3、利用弹性布局

设置flex:1;可以自适应剩余空间

左边
中间
右边

4、利用负margin

中间部分浮动,设置宽度100%,充满整个屏幕宽,内部一个div放置内容,利用margin设置留出左右两块的宽度

中间
左边
右边

5、利用display:table;

左边
中间
右边

 

你可能感兴趣的:(CSS)