双飞翼布局和圣杯布局（中间自适应的三栏布局）

最新推荐文章于 2023-05-08 10:10:46 发布

whileqq

最新推荐文章于 2023-05-08 10:10:46 发布

阅读量171

点赞数

分类专栏：前端文章标签： html css 前端

本文链接：https://blog.csdn.net/whileqq/article/details/116763066

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

双飞翼布局和圣杯布局

面试中经常被问到的双飞翼布局和圣杯布局
通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。

一、两者区别：

（1）圣杯布局：为了让中间div内容不被遮挡，将中间div设置左右padding，然后将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

（2）双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。

二、圣杯布局的写法

（1）用flex实现一个简单的圣杯布局

1.给父盒子display：flex
2. 父盒子里面的三个子盒子中，左右两个盒子指定宽度，中间那个盒子flex：1，占据中间的一整份。

<!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>
        #bd {
            display: flex;
            /* width: 100%; */
        }    
        #left,
        #right {
            width: 200px;
            height: 300px;
            background-color: pink;
        }
        
        #middle {
            flex: 1;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="bd">
        <div id="left">left</div>
        <div id="middle">middle</div>
        <div id="right">right</div>
    </div>
</body>
</html>

3.实现效果：
在这里插入图片描述
（2）用浮动+定位实现一个简单的圣杯布局

1.将中间div设置左右padding
2.将左右两个div用相对布局position: relative并分别配合right和left属性

CSS部分：

 <style>
        #bd {
            padding: 0 200px 0 180px;
            overflow: hidden;
        }
        
        #middle {
            float: left;
            width: 100%;
            height: 300px;
            background-color: aqua;
        }
        
        #left {
            float: left;
            width: 180px;
            height: 300px;
            background-color: pink;
            margin-left: -100%;
            position: relative;
            left: -180px;
        }
        
        #right {
            float: left;
            width: 200px;
            height: 300px;
            background-color: pink;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>

HTML部分：

 <div id="bd">
        <!-- middle盒子需要放在最前面  -->
        <div id="middle">middle</div>
        <div id="left">left</div>
        <div id="right">right</div>
    </div>

实现效果同第一个方法是一样的。

三、双飞翼布局的写法

1.在中间div内部创建子div用于放置内容
2.在该div里用margin-left和margin-right为左右两栏div留出位置

CSS部分：

 <style>
        .middle {
            float: left;
            width: 100%;
            height: 300px;
            background-color: aqua;
        }
        
        .left {
            float: left;
            width: 180px;
            height: 300px;
            background-color: pink;
            margin-left: -100%;
        }
        
        .right {
            float: left;
            width: 200px;
            height: 300px;
            background-color: pink;
            margin-left: -200px;
        }
        
        .inside {
            margin: 0 200px 0 180px;
            height: 300px;
        }
    </style>

HTML部分：

 <div class="bd">
        <div class="middle">

            <div class="inside">111</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

实现效果：
在这里插入图片描述

四、两种布局实现效果对比

虽然双飞翼布局和圣杯布局的实现效果看起来几乎是一样的，但是实际上它们的背景是有所不同的。
（1）圣杯布局
middle盒子的背景就是它本身
在这里插入图片描述

（2）双飞翼布局
middle盒子的背景是整个父盒子
在这里插入图片描述

whileqq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
双飞翼布局和圣杯布局（中间自适应的三栏布局）

双飞翼布局和圣杯布局面试中经常被问到的双飞翼布局和圣杯布局通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。一、两者区别：（1）圣杯布局：为了让中间div内容不被遮挡，将中间div设置左右padding，然后将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。（2）双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-
复制链接

扫一扫