CSS+DIV自适应布局

CSS+DIV自适应布局

1.两列布局（左右两侧，左侧固定宽度200px;右侧自适应占满）

代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>左右两侧，左侧固定宽度200px;右侧自适应占满</title>
        <style>
        .box{
            width:800px;
            height:300px;
            margin:0 auto;
        }
        .left{
            width:200px;
            height:300px;
            background:#f00;
            float:left;
        }
        .right{
            height:300px;
            margin-left:200px;
            background:#0f0;
        }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>

运行结果如下图：

• 两栏布局（左定宽，右自动）
• float + margin

2.三列布局（左中右三列，左右200px固定，中间自适应占满）

方法一（左右浮动，中间 margin-left,margin-right，中间div在最后）

• 代码如下

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>左中右三列，左右200px固定，中间自适应占满 方法一</title>
        <style>
.box{
    width:800px;
    height:300px;
    margin:0 auto;
}
.left{
    width:200px;
    height:300px;
    background:#f00;
    float:left;
}
.right{
    width:200px;
    height:300px;
    float:right;
    background:#0f0;
}
.center{
    height:300px;
    background-color:#00f;
    margin:0 200px;
}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center"></div>
        </div>
    </body>
</html>

• 运行结果如下图

方法二(左中右定位)：

• 代码如下

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>左中右三列，左右200px固定，中间自适应占满 方法二</title>
        <style>
.box{
    width:1000px;
    height:300px;
    margin:0 auto;
    position:relative;
}
.left{
    width:200px;
    height:300px;
    background:#f00;
    position:absolute;
    top:0px;
    left:0px;
}
.right{
    width:200px;
    height:300px;
    background:#0f0;
    position:absolute;
    top:0px;
    right:0px;
}
.center{
    height:300px;
    background-color:#00f;
    position:absolute;
    left:200px;
    right:200px;
}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
    </body>
</html>

• 运行结果如下图：

3.上中下三行，头部，底部固定高200px，中间自适应占满

中间定位，底部定位

• 代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>上中下三行，头部，底部固定高200px，中间自适应占满</title>
        <style>
*{
    margin:0;
}
html{
    height:100%;

}
body{
    min-height:100%;
}
.header{
    width:100%;
    height:100px;
    background-color:#ccc;
}
.main{
    width:100%;
    background-color:#f00;
    position:absolute;
    top:100px;
    bottom:100px;
}
.footer{
    height:100px;
    width:100%;
    position:absolute;
    bottom:0px;
    background-color:#ccc;
}
        </style>
    </head>
    <body>
            <div class="header"></div>
            <div class="main"></div>
            <div class="footer"></div>
    </body>
</html>

• 运行代码如下图：

4.上下两部分，地下这个股东高度200px,如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer往下挤

• 代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>上下两部分，地下这个股东高度200px,如果上面的内容少，
        那么这个footer就固定在底部，如果内容多，就把footer往下挤</title>
        <style>
*{
    margin:0;
}
html{
    height:100%;
}
body{
    min-height:100%;
    background-color:#00f;
    position:relative;
}

.header{
    height:100%;
    background-color:#00f;
    padding-bottom:200px;
}
.footer{
    width:100%;
    height:200px;
    position:absolute;
    bottom:0px;
    background-color:#0ff;
}
        </style>
    </head>
    <body>
            <div class="header">
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
        sdsadas<br/>
            </div>
            <div class="footer"></div>
    </body>
</html>

• 运行结果如下图：

新手入门，请多多关照