CSS如何实现两栏布局,左边固定,右边自适应-创新互联

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

创新互联是一家集网站建设,郫都企业网站建设,郫都品牌网站建设,网站定制,郫都网站建设报价,网络营销,网络优化,郫都网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

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如何实现两栏布局,左边固定,右边自适应-创新互联
URL网址:http://bzwzjz.com/article/ceghoh.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 营销网站建设 营销型网站建设 自适应网站设计 网站建设开发 成都网站制作 高端网站建设 定制网站建设多少钱 网站制作公司 手机网站制作设计 成都网站建设公司 成都网站建设 重庆手机网站建设 企业网站制作 手机网站建设套餐 成都网站设计 成都网站建设公司 企业网站设计 网站建设公司 成都网站设计 成都网站建设流程 移动手机网站制作 专业网站设计