13518219792
这篇文章主要介绍了怎么用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实现两栏布局”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
