zoukankan html css js c++ java

网页布局——三列布局（左侧和右侧固定，中间自适应）

一：flex弹性布局

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
body{
    display: flex;
}
.left,.center,.right{
    height: 200px;
}
.left {
    width: 200px;
    background-color: blue;

}
.center {
    flex:1;
    background-color: red;  
}
.right{
    width: 200px;
    background-color: pink; 
}
</style>
</head>
<body>
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</body>
</html>

二：float和margin

这里需要注意center盒子和right盒子的位置，因为如果还是按照上一种的方法的文档位置会出现下图的情况，这是因为未浮动的块级盒子会独占一行。

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
.left,.center,.right{
    height: 200px;
}
.left {
    float: left;
    width: 200px;
    background-color: blue;
}
.center {
    margin: 0 200px;
    background-color: red; 
}
.right{
    float: right;
    width: 200px;
    background-color: pink; 
}
</style>
</head>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>
</html>

三：绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .left,.center,.right{
            height: 200px;
        }
        .left {
            position: absolute;
            width: 200px;
            left: 0;
            top: 0;
            background-color: blue;
        }
        .center {
            margin: 0px 200px;
            background-color: red;
        }
        .right {
            position: absolute;
            width: 200px;
            right: 0;
            top: 0;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

四：table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .container{
            display: table;
            width: 100%;
        }
        .left,.center,.right{
            height: 200px;
            display: table-cell;
        }
        .left{
            width: 200px;
            background-color: blue;
        }
        .center{
            background-color: red;
        }
        .right{
            width: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

第五种：display:grid网格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .container{
            display: grid;
            width: 100%;
            grid-template-rows: 200px;  /*设置行高*/
            grid-template-columns: 200px auto 200px;  /*设置列数属性*/
        }
        .left{
            background-color: blue;
        }
        .center{
            background-color: red;
        }
        .right{
            background-color: pink;
        } 
    </style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

第六种:圣杯布局

ps:须将中间内容优先渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .container{
            padding-left: 200px;
            padding-right: 200px;
        }
        .left,.center,.right{
            height: 200px;
            position: relative;
            float: left;
        }
        .left,.right{
            width: 200px;
        }
        .left{
            background-color: blue;
            margin-left: -100%;
            left: -200px;
        }
        .center{
            width: 100%;
            background-color: red;
        }
        .right{
            background-color: pink;
            margin-left: -200px;
            right: -200px;
        }  
    </style>
</head>
<body>
<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

第七种：双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .left,.center,.right{
            height: 200px;
            float: left;
        }
        .left,.right{
            width: 200px;
        }
        .left{
            background-color: blue;
            margin-left: -100%;
        }
        .center{
            width: 100%;
        }
        .inner{
            height: 200px;
            background-color: red;
            margin:0 200px;
        }
        .right{
            background-color: pink;
            margin-left: -200px;
        } 
    </style>
</head>
<body>
<div class="container">
    <div class="center">
        <div class="inner">
            middle
        </div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

查看全文

相关阅读:
如何使用jpegtran 压缩JPG图片
 JS获取后台返回的JSON数据
 VUE安装步骤1
VUE安装步骤
 SVN使用教程总结
 WebStorm的下载与安装
 理解CSS3 transform中的Matrix(矩阵)
http statusCode(状态码) 200、300、400、500序列详解
 JS如何获取屏幕、浏览器及网页高度宽度？
html5使用local storage存储的数据在本地是以何种形式保存的

原文地址：https://www.cnblogs.com/ruilin/p/11678519.html