有关于css的四种布局

四种布局

• （1）、左右两侧，左侧固定宽度200px，

右侧自适应占满。

• （2）、左中右三列，左右个200px固定，中间自适应占满。
• （3）、上中下三行，头部200px高，底部200px高，中间自适应占满。
• （4）、上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer挤着往下走。

一、第一种

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

代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>布局1</title>
        <link rel="stylesheet" href="dio.css"/>
    </head>
    <body>
    <div class="first"></div>
    <div class="second"></div>

    </body>
</html>

.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高，中间自适应占满）

代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>布局2</title>
        <link rel="stylesheet" href="dio2.css"/>
    </head>
    <body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>

    </body>
</html>

.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高，中间自适应占满

代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>布局3</title>
        <link rel="stylesheet" href="dio3.css"/>
    </head>
    <body>

        <div class="top"></div>
        <div class="center"></div>
        <div class="bottom"></div>

    </body>
</html>

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挤着往下走。

代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>布局4</title>
        <link rel="stylesheet" href="dio4.css"/>
    </head>
    <body>

    <div class="top">
    aijefoaiejfoaiejfaio<br/>
    ........
    </div>
    <div class="bottom"></div>
</body>
</html>

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;
}

若有错误请及时通知