html四种布局,有关于css的四种布局

四种布局

(1)、左右两侧，左侧固定宽度200px，

右侧自适应占满。

(2)、左中右三列，左右个200px固定，中间自适应占满。

(3)、上中下三行，头部200px高，底部200px高，中间自适应占满。

(4)、上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer挤着往下走。

一、第一种

图片如下：(左右两侧，左侧固定宽度200px，右侧自适应占满)

代码如下：

布局1

.first,.second{height:100px;}

.first{

width:200px;

background-color:yellow;

float:left;

}

.second{

background-color:red;

position:absolute;

right:0px;

left:200px;

width:100%;

}x

二、第二种

图片如下：(上中下三行，头部200px高，底部200px高，中间自适应占满)

代码如下：

布局2

.left,.center,.right{height:400px;}

.left{

width:200px;

background-color:yellow;

float:left;

}

.center{

background-color:red;

position:absolute;

right:200px;

left:200px;

}

.right{

width:200px;

float:right;

background-color:green;

}

三、第三种

图片如下：上中下三行，头部200px高，底部200px高，中间自适应占满

代码如下：

布局3

body{margin:0px;}

.top{

width:100%;

height:200px;

position:absolute;

background:red;

}

.center{

width:100%;

position:absolute;

background:blue;

top:200px;

bottom:200px;

}

.bottom{

width:100%;

height:200px;

position:absolute;

bottom:0px;

background:black;

}

四、第四种

图片如下：上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个bottom就固定在底部，如果内容多，就把bottom挤着往下走。

代码如下：

布局4

aijefoaiejfoaiejfaio

........

html{

height:100%;

}

body{

margin:0px;

min-height:100%;

position:relative;

background:red;

}

.top{

padding-bottom:300px;

}

.bottom{

position:absolute;

width:100%;

height:200px;

background:black;

bottom:0px;

left:0px;

}

若有错误请及时通知