双飞翼布局 – 乐趣区

实现双飞翼布局的五种方法

浮动
绝对定位
flex 布局
table
grid

浮动
浮动的实现，就是直接将左右两边的块实现左右浮动，中间实现自适应

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 浮动 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section div {height: 200px;}
        
        .left {
            width: 300px;
            float: left;
            background-color: pink;
        }
        
        .right {
            width: 300px;
            float: right;
            background-color: blue;
        }
        
        .center {background-color: red;}
    </style>
</head>

<body>
    <section>
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            浮动布局
        </div>
    </section>
</body>

</html>

绝对定位
实现方法将三块 div 实现绝对定位，将左右两块 div 分别设置 left 和 right 为 0，中间实现 left 和 right 各为左右两边的宽度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 绝对定位 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section div {
            height: 200px;
            position: absolute;
        }
        
        .left {
            width: 300px;
            left: 0;
            background-color: pink;
        }
        
        .right {
            width: 300px;
            right: 0;
            background-color: blue;
        }
        
        .center {
            left: 300px;
            right: 300px;
            background-color: red;
        }
    </style>
</head>

<body>
    <section>
        <div class="left"></div>
        <div class="center">
            absolute 布局
        </div>
        <div class="right"></div>
    </section>
</body>

</html>

flex 布局

实现方式：将外层的块级元素设置 flex，将中间的块级元素设置为 flex：1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 外边框增加 display：flex */
        
        section {display: flex;}
        
        section div {height: 200px;}
        
        .left {
            width: 300px;
            background-color: pink;
        }
        
        .right {
            width: 300px;
            background-color: blue;
        }
        
        .center {
            flex: 1;
            background-color: red;
        }
    </style>
</head>

<body>
    <section>
        <div class="left"></div>
        <div class="center">
            flex 布局
        </div>
        <div class="right"></div>
    </section>
</body>

</html>

表格布局

实现方式：将外层块级元素设置 display:table，分别设置左右两个块级元素固定宽，中间块级元素自适应

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 表格布局 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 外边框设置 table 布局，并设置宽度为 100% */
        
        section {
            display: table;
            width: 100%;
        }
        
        section div {
            height: 200px;
            display: table-cell;
        }
        
        .left {
            width: 300px;
            background-color: pink;
        }
        
        .right {
            width: 300px;
            background-color: blue;
        }
        
        .center {background-color: red;}
    </style>
</head>

<body>
    <section>
        <div class="left"></div>
        <div class="center">
            table 布局
        </div>
        <div class="right"></div>
    </section>
</body>

</html>

grid 布局

实现方式：外边框设置 grid 布局，并设置宽度为 100%，设置 grid-template-rows 和 grid-template-columns

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid 布局 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            display: grid;
            grid-template-rows: 200px;
            grid-template-columns: 300px auto 300px;
            width: 100%;
        }
        
        .left {background-color: pink;}
        
        .right {background-color: blue;}
        
        .center {background-color: red;}
    </style>
</head>

<body>
    <section>
        <div class="left"></div>
        <div class="center">
            grid 布局
        </div>
        <div class="right"></div>
    </section>
</body>

</html>