两列自适应布局

两列自适应布局是指左(右)侧有一个宽度固定的侧边栏,另一列宽度自适应。

一般我们有以下4种实现方式,废话不多说,直接上代码:

  • 通过将aside浮动,然后设置main的margin来实现




    
    两列自适应布局
    



    
main main main main main main
  • 将aside浮动, 再将main设置为overflow: auto,触发BFC形成独立区域,达到效果。




    
    两列自适应布局
    



    
main main main main main main
  • 将aside设置为绝对定位,然后通过设置aside的width和wrapper的padding来实现




    
    两列自适应布局
    



    
main main main main main main
  • 弹性布局




    
    两列自适应布局
    



    
main main main main main main

你可能感兴趣的:(两列自适应布局)