首页 / HTML / CSS两列布局之左侧适应，右侧固定3种方式_html/css_WEB-ITnose

CSS两列布局之左侧适应，右侧固定3种方式_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS两列布局之左侧适应，右侧固定3种方式_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3627字，纯文字阅读大概需要6分钟。

内容图文

第一种：左侧用margin-right，右侧float：right

CSS代码：

html,        body,ul,li        #wrapper {            width: 100%;            height: 100%;            padding: 0;            margin: 0;        }                .left,        .right {            min-height: 500px;            border: 0;        }                .left {            background-color: #999999;            margin-right: 151px;                    }                /*左适应右固定第一种*/        .right {            background-color: #808080;            width: 150px;            float: right;        }                .content {            background-color: #CCCCCC;            /*padding-right: 150px;*/            /*width: 100%;*/        }                .content li{            float: left;            width: 150px;        }

html代码：

            
                右侧菜单            
            
                
                    
                            
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •                         
  • 我是sad放假阿萨洛夫 
    •

第二种：左侧同样用margin-right 右侧采用绝对定位

CSS代码（只需要把第一种注释部分替换即可）：

/*左适应右固定第一种*/        /*.right {            background-color: #808080;            width: 150px;            float: right;        }*/                /*左适应右固定第二种(把上面的替换为改代码即可)*/        .right {            background-color: #808080;            width: 150px;            position: absolute;            top: 0px;            right: 0px;        }

第三种：左右浮动都浮动 且 右侧用负margin值

CSS代码：

.wrap {                overflow: hidden;                background: #EEE;            }                        .wrap-right {                width: 300px;                /*position: relative;*/                float: right;                margin-left: -300px;                background: #AAA;            }                        .wrap-left {                width: 100%;                float: left;            }                        .left-con {                margin-right: 300px;                background: #DDD;            }                        .left-con,            .wrap-right {                height: 300px;            }

HTML代码：

            
                
                    我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc                
            
            
                我是mmmmmm

最终效果：

内容总结

以上是互联网集市为您收集整理的CSS两列布局之左侧适应，右侧固定3种方式_html/css_WEB-ITnose全部内容，希望文章能够帮你解决CSS两列布局之左侧适应，右侧固定3种方式_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/404523.html

来源：【匿名】