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

时间：2019-11-03 12:40:41 阅读：97 评论：0 收藏：0 [点我收藏+]

一：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>

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

标签：浮动定位 ima color 需要 body ack abs play

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行