189 8069 5689

怎么用css实现两栏布局

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


分享名称:怎么用css实现两栏布局
URL网址:http://cdxtjz.cn/article/iepdog.html

其他资讯