有关于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;
}

若有错误请及时通知

有关于css的四种布局

四种布局

一、第一种

二、第二种

三、第三种

四、第四种

dawdler_Bo

引用和评论

Today（2019年6月29日）

网页设计的垂直居中

CSS团队协作规范

前端开发工具

Jerry和您聊聊Chrome开发者工具

CSS 如何模拟“真实的”进度条？

面向企业级前端应用的开发框架 UI5 的发展简史介绍