圣杯布局&双飞翼布局

qq_51019475

已于 2022-04-03 21:46:59 修改

阅读量121

点赞数

分类专栏：布局文章标签： html css

于 2022-04-03 21:46:22 首次发布

本文链接：https://blog.csdn.net/qq_51019475/article/details/123944886

版权

布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. float

1.1 圣杯布局和双飞翼布局

1.1.1 作用

实现pc端三栏布局，中间一栏最先渲染
实现两边宽度固定，中间自适应
效果图

1.1.2 圣杯布局

为了让中间盒子最先渲染，所以中间盒子放在三个盒子的第一个位置
左中右盒子全部浮动
防止中间内容被两侧覆盖，一个用padding
两侧使用margin负值，分别放置左右两边
- 左边margin-left: 100%
- 左边平移padding宽度
- 右边盒子margin-right : -200px (设置成自身宽度，且是负值，平移到上一行)
  
  代码分析


<!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>
        
        .container {
            background-color: #ddd;
            padding: 0 200px;
            font-size: 40px;
            /* overflow: hidden; */
        }

        .left {
            position: relative;
            width: 200px;
            height: 200px;
            margin-left: -100%;
            right: 200px;
            background-color: tomato;
        }

        .right {
            width: 200px;
            height: 200px;
            margin-right: -200px;
            background-color: thistle;
        }

        .center {
            width: 100%;
            height: 200px;
            background-color: turquoise;
        }
        .fl {
            float: left;
        }
        .clearfix::after {
            content: '';
            display: table;
            clear: both;
        }
        /* 兼容IE低版本 */
        .clearfix {
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="container clearfix">
        <div class="center fl" >中间盒子</div>
        <div class="left fl" >左</div>
        <div class="right fl" >右</div>
    </div>
</body>

</html>

1.1.3 双飞翼布局

中间盒子最先渲染
全部浮动
为了不让左右盒子覆盖中间盒子内部，中间盒子内部设置margin
左边盒子设置margin-left: -100%;
右边盒子设置 margin-left： -200px ；和圣杯布局设置不一样原因是圣杯布局的margin是放在同一个外层盒子中，而双飞翼布局是三个独立的盒子，右盒子是被挤下去的

代码分析：


<!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>
        .fl {
            float: left;
        }
        body {
            font-size: 40px;
            min-width: 500px;
            background-color: #ddd;
        }
        .left {
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin-left: -100%;
        }

        .right {
            width: 200px;
            height: 200px;
            background-color: thistle;
            margin-left: -200px;
        }

        .center {
            width: 100%;
            height: 200px;
            background-color: turquoise;
        }
        .c-inner {
            margin: 0 200px;
        }
    </style>
</head>

<body>

    <div class="fl center" >
        <div class="c-inner">中间盒子</div>
    </div>
    <div class="fl left" >左</div>
    <div class="fl right" >右</div>


</body>

</html>