平武建站

CSS如何实现两栏布局，左边固定，右边自适应

这篇文章主要介绍CSS如何实现两栏布局，左边固定，右边自适应，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

陇南网站建设公司创新互联公司,陇南网站设计制作，有大型网站制作公司丰富经验。已为陇南1000多家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的陇南做网站的公司定做！

1. float+overflow:hidden

这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下：




  
  
  
  Document
  


   
     
    
left left left left
 
    
            

right

      

right

      
    
 

2. float: left+ margin-left

float使左边的元素脱离文档流，右边的元素可以和左边的元素显示在同一行，设置margin-left让右边的元素不覆盖掉左边的元素， 代码如下：




  
  
  
  Document
  


   
     
    
left left left left
 
    
            

right

      

right

    

right

            

3. position: absolute + margin-left

左边绝对定位，右边设置margin-left，代码如下：




  
  
  
  Document
  


   
     
    
left left left left
 
     
     
    
right
 
    
right

    
right
 
     
    

4. flex布局

flex布局可以使两个子元素显示在同一行，只要左边的宽度固定，就可以实现效果， 代码如下：





  
  
  
  Document
  



  
    
      
left left left left

    
    
      
right

      
right

      
right

    
  

以上是“CSS如何实现两栏布局，左边固定，右边自适应”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


网站栏目：CSS如何实现两栏布局，左边固定，右边自适应
浏览路径：http://pwwzsj.com/article/ijjgpp.html

其他资讯