两边固定中间自适应布局的实现

  • 使用flex布局




    
    
    



    
left
center

box的600px足够容纳两侧各200px的固定长度div,所以两边的div不会随浏览器长度而变化,中间的div默认flex-grow为0,设置为1后,剩余长度都会加到它上面

  • 利用浮动(float)
    让左右元素浮动,缺点是中间元素必须置于二者之后,不然right元素会进入下一行









left
right
center
  • 利用绝对定位(position)
    center居中并利用margin为左右两边留出位置,左右绝对定位




    
    css三列布局
    



    
left
center
right

你可能感兴趣的:(两边固定中间自适应布局的实现)