双飞翼布局实现

Clover‘s Blog

于 2023-05-17 17:19:37 发布

阅读量525

点赞数

分类专栏： CSS 文章标签： html css html5

本文链接：https://blog.csdn.net/Clover_zlx/article/details/130730469

版权

CSS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

是什么？

双飞翼布局是一种常见的网页布局方式，具有两个侧边栏和一个中间内容区域。

与圣杯布局不同的是，双飞翼布局将三个部分放在同一层级的div中，而且左右两个侧边栏的宽度可以不固定，适应更加灵活。

实现方式

方式一：【 flex实现双飞翼布局】

1、给中部父盒子设置宽度100%设置display：flex;，

2、给左侧和右侧盒子设置固定的宽度，高度固定值

3、中间的盒子设置flex-grow: 1;，宽度不设置，高度固定值

4、头部和底部设置宽度100%，高度固定值

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            margin:0;
            padding:0;
        }
        .flex {
            width: 100%;
            display: flex;
            text-align: center;
        }

        .left {
            height: 400px;
            width: 200px;
            text-align: center;
            background-color: blue;
        }

        .right {
            height: 400px;
            width: 200px;
            text-align: center;
            background-color: blue;
        }

        .center {
            flex-grow: 1;
            height: 400px;
            text-align: center;
            background-color: aqua;
        }

        header {
            width: 100%;
            height: 100px;
            text-align: center;
            background-color: pink;
        }

        footer {
            width: 100%;
            height: 100px;
            text-align: center;
            background-color: pink;
        }
    </style>
</head>

<body>
    <header>头部</header>
    <div class="flex">
        <div class="left">左侧盒子</div>
        <div class="center">中部盒子</div>
        <div class="right">右侧盒子</div>
    </div>
    <footer>底部</footer>
</body>

</html>

方式二：【calc实现双飞翼布局】

1、左右两个盒子设置固定的宽度，高度固定值

2、中间盒子的宽度设置为width: calc(100% - “左侧盒子宽度” - “右侧盒子宽度”);注意减号两边的空格，高度固定值

3、三个盒子设置float: left;排在同一行显示，则可以实现双飞翼布局

4、头部和底部设置宽度100%，高度固定值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left {
            height: 400px;
            width: 200px;
            text-align: center;
            background-color: blue;
            float: left;
        }
 
        .right {
            height: 400px;
            width: 200px;
            text-align: center;
            background-color: blue;
            float: left;
        }
 
        .center {
            height: 400px;
            width: calc(100% - 200px - 200px);
            background-color: aqua;
            text-align: center;
            float: left;
 
        }
 
        header {
            width: 100%;
            height: 100px;
            text-align: center;
            background-color: pink;
        }
 
        footer {
            width: 100%;
            height: 100px;
            text-align: center;
            background-color: pink;
            clear: both;
        }
    </style>
</head>
<body>
    <header>头部</header>
    <div class="box">
        <div class="left">左侧盒子</div>
        <div class="center">中部盒子</div>
        <div class="right">右侧盒子</div>
    </div>
    <footer>底部</footer>
</body>
</html>

方式三：【定位实现双飞翼布局】

1、左侧盒子与右侧盒子设置固定宽度，高度固定值，添加左浮动

2、中间盒子宽度设置100%，设置左浮动，高度固定值

3、大盒子左右的padding值分别为左右侧盒子的宽度

4、左侧盒子 margin-left: -100%;，position: relative;，left: -“左侧盒子的宽度”;

5、右侧盒子 margin-left: -“右侧盒子的宽度”px;，position: relative;， right: -“右侧盒子的宽度”px;

6、头部和底部设置宽度100%，高度固定值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
         .box {
            padding: 0 200px;
            text-align: center;
        }
 
        header {
            width: 100%;
            height: 100px;
            text-align: center;
            background-color: pink;
        }
 
        footer {
            width: 100%;
            height: 100px;
            text-align: center;
            background-color: pink;
            clear: both;
        }
 
        .center {
            width: 100%;
            height: 200px;
            text-align: center;
            background-color: blue;
            float: left;
        }
 
        .left {
            float: left;
            margin-left: -100%;
            width: 200px;
            height: 200px;
            text-align: center;
            background-color: aqua;
            position: relative;
            left: -200px;
        }
 
        .right {
            margin-left: -200px;
            width: 200px;
            height: 200px;
            text-align: center;
            background-color: green;
            float: left;
            position: relative;
            right: -200px;
        }
    </style>
</head>
<body>
    <header>头部</header>
    <div class="box">
        <div class="center">中部盒子</div>
        <div class="left">左侧盒子</div>
        <div class="right">右侧盒子</div>
    </div>
    <footer>底部</footer>
</body>
</html>