php分两栏代码,css实现两栏布局的三种方法介绍（代码）

本篇文章给大家带来的内容是关于css实现两栏布局的三种方法介绍(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1、浮动布局

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

float: left;

width: 200px;

height: 200px;

background: darkcyan

}

.two{

margin-left: 200px;

height: 200px;

background: salmon

}

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

float: right;

width: 200px;

height: 200px;

background: darkcyan

}

.two{

margin-right: 200px;

height: 200px;

background: salmon

}

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

width: 300px;

height: 100px;

background:darkcyan;

margin-right: -100%;

float: left;

}

.main{

width: 100%;

float: left;

}

.content{

margin-left: 300px;

background: salmon;

}

3、绝对定位

width: 200px;

height: 200px;

position: absolute;

background: darkcyan

}

.right{

height: 200px;

margin-left:200px;

background: salmon;

}

相关推荐：