本篇文章给大家带来的内容是关于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
