实现两栏布局的五种方式

本文节选自我的博客:实现两栏布局的五种方式

  • 作者简介:大家好,我是MilesChen,偏前端的全栈开发者。
  • CSDN主页:爱吃糖的猫
  • 我的博客:爱吃糖的猫
  • Github主页: MilesChen
  • 支持我:点赞+收藏⭐️+留言
  • 介绍:The mixture of WEB+DeepLearning+Iot+anything

前言

实现两栏布局也是一道经典的面试题,两栏布局即左边固定右边伸缩,要实现两栏布局的方式超过十种了,下面举例五种,用来抛砖引玉。

float+BFC



    
        
        
        
        两栏布局
        
    
    
		
左侧
右侧

float+margin



    
        
        
        
        两栏布局
        
    
    
		
左侧
右侧

flex



    
        
        
        
        两栏布局
        
    
    
		
左侧
右侧

左侧绝对定位



    
        
        
        
        两栏布局
        
    
    
		
左侧
右侧

右侧绝对定位



    
        
        
        
        两栏布局
        
    
    
		
左侧
右侧

总结

  1. float+BFC:第一栏float:left; overflow: hidden; 清除浮动显示第二栏
  2. float+margin:第一栏float:left;给第二栏设置margin-left
  3. flex:将第二栏flex设置为1
  4. 左边绝对定位:第一栏绝地定位;第二栏margin-left
  5. 右边绝对定位:第二栏绝对定位:left为第一栏的宽度;top: 0;left: 200px;right: 0;bottom: 0;

还有其他方式,比如 gridfloat+calctable+calc 就不一一举例了。


感谢小伙伴们的耐心观看,本文为笔者个人学习记录,如有谬误,还请告知,万分感谢!如果本文对你有所帮助,还请点个关注点个赞~,您的支持是笔者不断更新的动力!

你可能感兴趣的:(前端,前端,CSS)