怎么用css实现两栏布局

这篇文章主要介绍了怎么用css实现两栏布局，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

　　1、浮动布局

　　左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。

　　<divclass="one"></div>

　　<divclass="two"></div>

　　.one{

　　float:left;

　　width:200px;

　　height:200px;

　　background:darkcyan

　　}

　　.two{

　　margin-left:200px;

　　height:200px;

　　background:salmon

　　}

　　右侧固定宽度，左侧自适应则是同理，只要将固定栏右浮动，使用margin-right空出其宽度即可。

　　<divclass="one"></div>

　　<divclass="two"></div>

　　.one{

　　float:right;

　　width:200px;

　　height:200px;

　　background:darkcyan

　　}

　　.two{

　　margin-right:200px;

　　height:200px;

　　background:salmon

　　}

　　2、浮动布局+负外边距（双飞翼布局的两栏版）

　　<divclass="aside"></div>

　　<divclass="main">

　　<divclass="content"></div>

　　</div>

　　.aside{

　　width:300px;

　　height:100px;

　　background:darkcyan;

　　margin-right:-100%;

　　float:left;

　　}

　　.main{

　　width:100%;

　　float:left;

　　}

　　.content{

　　margin-left:300px;

　　background:salmon;

　　}

　　3、绝对定位

　　<divclass="left"></div>

　　<divclass="right"></div>

　　.left{

　　width:200px;

　　height:200px;

　　position:absolute;

　　background:darkcyan

　　}

　　.right{

　　height:200px;

　　margin-left:200px;

　　background:salmon;

　　}

感谢你能够认真阅读完这篇文章，希望小编分享的“怎么用css实现两栏布局”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!