常见的圣杯布局实现

1|0圣杯布局

1|11.定位实现--圣杯布局

1.DOM结构

<div class="container">
        <div class="column" id="center"></div>
        <div class="column" id="left"></div>
        <div class="column" id="right"></div>
    </div>

首先定义出整个布局的DOM结构，主体部分由三部分组成包裹center,left,right三列，其中center定义在最前面。

2.CSS代码

假设左侧的固定宽度为200px,右侧的固定宽度为150px,则首先在container上设置，

#container{
padding-left:200px;
padding-right:150px;
}

然后对其left、right进行设置

#left{
width:200px;
margin-left:-100%;
}

此时我们需要将其left利用定位移动到上面center位置，

postion:relative;
right:200px;

最终 圣杯布局效果实现 center部位即可自适应

1|22.flex实现--圣杯布局

 
<!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>flex实现圣杯布局</title>
    <style>
        .container {
            display: flex;
        }

        .left {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }

        .right {
            width: 150px;
            height: 200px;
            background-color: coral;
        }

        .center {
            flex: 1;
            /* 剩下的地方 他一个独占了 */
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

2.实现效果

1|33.浮动实现---圣杯布局

 
<!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>圣杯布局</title>
    <style>
        .container {
            margin-left: 120px;
            margin-right: 220px;
        }

        .main {
            float: left;
            width: 100%;
            height: 300px;
            background-color: green;
        }

        .left {
            position: relative;
            left: -120px;
            float: left;
            width: 100px;
            height: 300px;
            background-color: red;
            margin-left: -100%;
        }

        .right {
            position: relative;
            right: -220px;
            float: right;
            height: 300px;
            width: 200px;
            background-color: blue;
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <script>

    </script>
</body>

</html>

__EOF__

本文作者：Gurad
本文链接：https://www.cnblogs.com/Gurad/p/16382812.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   Gurad-your-heart  阅读(113)  评论(0)  编辑  收藏  举报
相关博文：
· 前端工程化
· vue笔记整理
· html怎么进行圣杯布局
· 左定右定中间自适应布局（圣杯布局）
· 圣杯布局和双飞翼布局实现两侧宽度固定，中间宽度自适应及其他扩展实现
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
历史上的今天：
2021-06-16 JS计算水仙花数
点击右上角即可分享
微信分享提示