圣杯布局

逃离我推掉我的手 2024-04-19 11:33 64阅读 0赞

<style>
            * {
                padding: 0;
                margin: 0;
            }
    
            body {
                /* 最小宽度是700px pc端  */
                /* min-width: 700px; */
            }
            .center,.left,.right {
                /* 最小高度300px */
                min-height: 300px;
                float: left;
    
    
            }
    
            .center {
                width: 100%;
                height: 400px;
                background-color: red;
    
               
            }
            .left {
                width: 200px;
                height: 400px;
                background-color: yellow;
                /* 向左走100% 左外间距-100% */
                margin-left: -100%;
                position: relative;
                left: -200px;
    
            }
            .right {
                position: relative;
                width: 220px;
                height: 400px;
                background-color: green;
                margin-left: -220px;
                right: -220px;
            }
            .container {
                padding: 0 220px 0 200px;
            }
        </style>
    
    <body>
        
        <div class="container">
            
            <div class="center"></div>
            
            <div class="left"></div>
            
            <div class="right"></div>
        </div>
    </body>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e9da164767084d1b99f62c72a83e1245.png

发表评论取消回复

表情：

评论列表（有 0 条评论，64人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS圣杯布局实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-eq

迈不过友情╰/ 2022年09月25日 06:22/ 0 赞/ 219 阅读

相关圣杯布局的实现过程

圣杯布局和双飞翼布局，它们都要求三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，而双飞翼布局是对圣杯布局的一种改良，下一篇会讲到。圣

骑猪看日落/ 2022年07月14日 05:21/ 0 赞/ 157 阅读

相关 CSS经典布局~圣杯布局

为了实现中间自适应，两边固定的最好解决方法, 话不多说，直接撸代码吧。 HTML部分： <div class="wrap"> <div id="hea

男娘i/ 2022年05月19日 02:38/ 0 赞/ 255 阅读

相关 CSS 圣杯布局

圣杯布局，不要被名字所迷惑只是一种简单的布局方式，也不知道从何时起，这种布局方式有了这么响亮的外号。 CSS+DIV 最常见的分栏布局就是浮动布局啦，以Bootstrap框架

川长思鸟来/ 2022年05月12日 13:58/ 0 赞/ 208 阅读

相关 2.1圣杯布局

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

系统管理员/ 2022年05月09日 07:58/ 0 赞/ 214 阅读

相关详解圣杯布局

圣杯布局 html结构： <!doctype html> <html lang="en"> <head> <meta cha

以你之姓@/ 2022年04月25日 00:14/ 0 赞/ 383 阅读

相关圣杯布局

.left{100px}.right{100px}.center{ calc(100% - 200px) } 圣杯布局复制代码转载于:h

布满荆棘的人生/ 2022年01月19日 03:05/ 0 赞/ 260 阅读

相关 flex 圣杯布局

![604357-20190302201827173-536339308.png][] 基本思路圣杯布局分为3段：上、中、下。中段被分为：左、中、右3块。 1

客官°小女子只卖身不卖艺/ 2021年12月18日 15:09/ 0 赞/ 407 阅读

相关圣杯布局

圣杯布局要实现两边固定，中间自适应，中间部分的代码要放在最上面实现优先加载步骤第一步：创建middle，left，right，及包裹它们的父盒子cont

不念不忘少年蓝@/ 2021年08月29日 02:34/ 0 赞/ 409 阅读

相关圣杯布局+伪等高布局

===>>>：[圣杯布局][Link 1] 伪等高就是不设置三块都不设置高度，内部自适应 / 伪等高如果超出 100000px边界就失效了 /

亦凉/ 2021年08月28日 21:54/ 0 赞/ 387 阅读