圣杯布局及类似布局的多种实现思路

最新推荐文章于 2023-09-02 14:57:27 发布
最新推荐文章于 2023-09-02 14:57:27 发布
阅读量338 收藏
点赞数
分类专栏： CSS 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YSum_/article/details/121336299
版权

效果如图所示，为左(left)右(right)固定宽度，中间(center)自适应宽度的布局

 方法1：浮动+margin负值+相对定位（圣杯布局）

1. 首先搭建html结构，用一个container的盒子包裹center、left、right这三个盒子，要先渲染center盒子，故结构中center处在最前。container中三个盒子浮动，故需要清除浮动。

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

2. 分别设置CSS样式。三个盒子都浮动，给container的padding-left为left的宽度，padding-right为right的宽度。center的宽度为100%。

<style>
    body {
        min-width: 550px;
        margin: 0;
        padding: 0;
    }
    
    div {
        box-sizing: border-box;
    }
    
    .clearfix::after,
    .clearfix::before {
        content: "";
        display: table;
    }
    
    .clearfix::after {
        clear: both;
    }
    
    .clearfix {
        *zoom: 1;
    }
    
    header,
    footer {
        display: block;
        height: 100px;
        background-color: #ccc;
    }
    
    .container {
        padding: 0 150px 0 200px;
    }
    
    .center,
    .left,
    .right {
        float: left;
        height: 200px;
    }
    
    .center {
        width: 100%;
        background-color: skyblue;
    }
    
    .left {
        width: 200px;
        background-color: antiquewhite;
    }
    
    .right {
        width: 150px;
        background-color: pink;
    }
</style>

3. 效果如图所示，由于三个盒子浮动，center宽度为100%，故left和right盒子只能换行显示

 4. 要将left盒子移到center左边，首先给一个margin-left: -100%，再用相对定位移到左边的空白处，CSS代码及效果图如下

<style>
    .left {
    position: relative;
    left: -200px;
    margin-left: -100%;
    width: 200px;
    background-color: antiquewhite;
    }
</style>

5. 将right盒子用margin-right: -150px移动到center右边空白处。

<style>
    .right {
    margin-right: -150px;
    width: 150px;
    background-color: pink;
    }
</style>

 方法二：浮动+margin负值（双飞翼布局）

1. 搭建html结构如下，center、left、right盒子浮动，故box需要清除浮动。同样是先渲染center，故结构中center在最前。

<body>
    <header>header</header>
    <div class="box clearfix">
        <div class="center">
            <div class="content">center</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer>footer</footer>
</body>

2. center盒子宽度为父级100%，其中的content盒子给左右margin分别为left和right的宽度。CSS代码及效果图如下：

<style>
    body {
        min-width: 500px;
        margin: 0;
        padding: 0;
    }
    
    div {
        box-sizing: border-box;
    }
    
    .clearfix::after,
    .clearfix::before {
        content: "";
        display: table;
    }
    
    .clearfix::after {
        clear: both;
    }
    
    .clearfix {
        *zoom: 1;
    }
    
    header,
    footer {
        display: block;
        height: 100px;
        background-color: #ccc;
    }
    
    .center,
    .left,
    .right {
        float: left;
        height: 200px;
    }
    
    .center {
        width: 100%;
    }
    
    .content {
        height: 200px;
        margin: 0 150px 0 200px;
        background-color: skyblue;
    }
    
    .left {
        width: 200px;
        background-color: antiquewhite;
    }
    
    .right {
        width: 150px;
        background-color: pink;
    }
</style>

3. left盒子用margin-left: -100%移到center左边空白处。代码及效果图如下：

<style>
    .left {
        margin-left: -100%;
        width: 200px;
        background-color: antiquewhite;
    }
</style>

4. 将right盒子用margin-left: -150px移到center右边空白处。代码及效果图如下：

<style>
    .right {
        margin-left: -150px;
        width: 150px;
        background-color: pink;
    }
</style>

 方法三：浮动+calc()函数

1. 搭建html结构如下，left、center、right都需要浮动。

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

2. left、right给固定宽度，center宽度用函数calc(100% - 350px)表示，350px即为left和right宽度之和。CSS代码及效果图如下：

<style>
    body {
        min-width: 500px;
        margin: 0;
        padding: 0;
    }
    
    div {
        box-sizing: border-box;
    }
    
    .clearfix::after,
    .clearfix::before {
        content: "";
        display: table;
    }
    
    .clearfix::after {
        clear: both;
    }
    
    .clearfix {
        *zoom: 1;
    }
    
    header,
    footer {
        display: block;
        height: 100px;
        background-color: #ccc;
    }
    
    .center,
    .left,
    .right {
        float: left;
        height: 200px;
    }
    
    .left {
        width: 200px;
        background-color: antiquewhite;
    }
    
    .center {
        width: calc(100% - 350px);
        background-color: skyblue;
    }
    
    .right {
        width: 150px;
        background-color: pink;
    }
</style>

 方法四：绝对定位+margin

1. html结构如下：

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

2. left、right给固定宽度，并且使用绝对定位，分别定到左侧及右侧，center盒子不给宽度（默认占满一行）给左右的margin值分别为left和right的宽度。CSS代码及效果图如下：

<style>
    body {
        min-width: 500px;
        margin: 0;
        padding: 0;
    }
    
    div {
        box-sizing: border-box;
    }
    
    header,
    footer {
        display: block;
        height: 100px;
        background-color: #ccc;
    }
    
    .container {
        position: relative;
    }
    
    .center {
        height: 200px;
        margin: 0 150px 0 200px;
        background-color: skyblue;
    }
    
    .left,
    .right {
        position: absolute;
        top: 0;
        width: 200px;
        height: 200px;
        background-color: antiquewhite;
    }
    
    .left {
        left: 0;
    }
    
    .right {
        right: 0;
        width: 150px;
        background-color: pink;
    }
</style>

 方法五：flex布局

1. html结构如下：

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

2. container采用flex弹性布局，给left和right设置固定宽度，center设置flex: 1。CSS代码及效果图如下：

<style>
    body {
        min-width: 500px;
        margin: 0;
        padding: 0;
    }
    
    div {
        box-sizing: border-box;
    }
    
    header,
    footer {
        display: block;
        height: 100px;
        background-color: #ccc;
    }
    
    .container {
        display: flex;
        height: 200px;
    }
    
    .left {
        width: 200px;
        background-color: antiquewhite;
    }
    
    .center {
        flex: 1;
        background-color: skyblue;
    }
    
    .right {
        width: 150px;
        background-color: pink;
    }
</style>

YSum
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
圣杯布局和双飞翼布局的原理探究
请叫我二狗哥
11-25 2187
浮动布局并不是再是流行的布局方式，不过基于浮动的经典布局还是经常出现在前端面试中，圣杯布局和双飞翼布局就是其中常考核的知识点。圣杯布局和双飞翼布局都是前端中三列设计布局方式，要求主要中间内容优先渲染，左右内容宽度固定，中间主要内容宽度自适应排布。圣杯布局和双飞翼布局都没有使用绝对定位，而是应用浮动、负外边距以及相对定位这几个核心知识点来实现。 圣杯布局 圣杯布局是让左右固定栏和中间自适应的主内容栏处于同一容器包裹中，容器（#container）设置padding-left、padding-right值，其
圣杯布局的三种实现
qq_58511059的博客
12-30 482
【代码】圣杯布局的三种实现。
圣杯布局和双飞翼布局的理解与思考
weixin_30617695的博客
11-24 115
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。 圣杯布局与双飞翼布局 圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，不过都遵循了以下要点： 两侧宽度固定...
自适应三栏式
m0_55041880的博客
07-21 360
<!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>Doc
实现圣杯布局的三种方式
qq_49278026的博客
07-02 8655
实现圣杯布局的三种方式。
双飞翼布局和圣杯布局
01-08
双飞翼布局和圣杯布局  网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。  首先三...
如何做出双飞翼布局与圣杯布局
01-08
双飞翼布局与圣杯布局是网页开发中两种常见的三栏布局方式，它们的主要目标是实现两侧栏宽度固定，中间栏宽度自适应，并且在页面加载时优先展示主要内容，提高用户体验。这两种布局方法都考虑了不同分辨率设备上的...
圣杯布局实现思路1
08-03
圣杯布局实现思路1
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。接下来通过本文教程给大家介绍CSS布局之圣杯布局与双飞翼布局，感兴趣的朋友一起学习吧
圣杯布局实现方式
qq_43781887的博客
07-10 1290
圣杯布局：左右两边固定，中间自适应的布局方式，效果图如下： 接下来主要介绍两种方法，第一种是采用绝对定位的方式，第二种方式是采用flex布局的方式。（1）采用绝对定位方式实现圣杯布局，主要思路是左右两边的盒子采用绝对定位固定宽高，中间的盒子用margin-left和margin-right将盒子固定在中间： （2）采用flex布局实现圣杯布局，主要思路是左右两边的盒子固定高宽，中间的盒子采用flex:1占剩下的内容区域即可，代码如下：...
圣杯布局（三种方法）
weixin_62716073的博客
08-01 1542
在 CSS 中的用法主要用于弹性盒子布局，它允许子元素根据容器的剩余空间进行放大和缩小，以实现响应式布局。第三个方法中需要注意的是元素排列顺序，由于浮动元素影响不了上级的块级元素所以一定注意div元素先后顺序。1.2 给左右盒子的 width 设置父盒子的 padding 值,2.1 父盒子设置 display:flex;3、利用 bfc 块级格式化上下文, 实现两侧固定中间自适应。2.3 中间盒子设置 flex:1;2、利用 flex 布局实现两侧固定中间自适应。1、利用定位实现两侧固定中间自适应。
圣杯布局实现
Clover ‘s Blog
05-17 1001
css
CSS经典三列布局之圣杯布局和双飞翼布局
m0_62164658的博客
08-19 477
css经典布局，圣杯布局，双飞翼布局
圣杯布局的四种实现方式
llj1028的博客
12-29 1290
圣杯布局
圣杯布局-三种实现方式，css经典布局
annans的博客
06-28 1939
经典布局：圣杯布局，三种实现方式
基本布局，圣杯布局，双飞翼布局
m0_73860660的博客
11-28 400
基本原始布局，纯CSS设置排版布局。
02-css三大布局（圣杯布局/双飞翼布局/div布局）
最新发布
2201_75866478的博客
09-02 209
讲很多原理也没用会显得比较难懂，所以我会尽量用简单的，通俗，并且清除的语言去描述这三种布局，结合实例演示，让大家轻松的理解这三大布局。
圣杯布局详解
dyb2440492276的博客
03-21 2918
作用： 圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 原理： 圣杯布局为了让中间div内容不被遮挡，将中间div设置了padding-left和padding-right后，将左右两个div用margin和相对定位布局，position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。 css代码： .header,.footer{ height: 200px;
CSS 圣杯布局 / 双飞翼布局的实现
05-19
CSS圣杯布局的实现： HTML结构如下： ``` 主要内容 左侧边栏 右侧边栏 ``` CSS样式如下： ``` .container { display: table; width: 100%; table-layout: fixed; border-spacing: 0; } .main { display:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值