本篇文章给大家带来的内容是关于css实现两栏布局的三种方法介绍（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1、浮动布局
左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。
登录后复制
.one{ float: left; width: 200px; height: 200px; background: darkcyan } .two{ margin-left: 200px; height: 200px; background: salmon }
登录后复制
右侧固定宽度，左侧自适应则是同理，只要将固定栏右浮动，使用margin-right空出其宽度即可。
登录后复制登录后复制
.one{ float: right; width: 200px; height: 200px; background: darkcyan } .two{ margin-right: 200px; height: 200px; background: salmon }
登录后复制
立即学习“前端免费学习笔记（深入）”；
2、浮动布局+负外边距（双飞翼布局的两栏版）
登录后复制
.aside{ width: 300px; height: 100px; background:darkcyan; margin-right: -100%; float: left; } .main{ width: 100%; float: left; } .content{ margin-left: 300px; background: salmon; }
登录后复制
3、绝对定位
登录后复制登录后复制
.left{ width: 200px; height: 200px; position: absolute; background: darkcyan } .right{ height: 200px; margin-left:200px; background: salmon; }
登录后复制
相关推荐：
Css布局系列-上下两栏布局_html/css_WEB-ITnose
Css布局系列-上下两栏布局_html/css_WEB-ITnose
Css布局系列-上下两栏布局_html/css_WEB-ITnose
以上就是css实现两栏布局的三种方法介绍（代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2893548.html
