双飞翼布局

忘是亡心i 2024-04-19 11:33 5阅读 0赞

<style>
        
        * {
            margin: 0;
            padding: 0;
           
        }
        .center {
            width: 100%;
            height: 500px;
            background-color: aqua;
            float: left;
        }
        .left {
            width: 200px;
            height: 500px;
            background-color: green;
            float: left;
            margin-left: -100%;
        }
        .right {
            width: 230px;
            height: 500px;
            background-color: yellow;
            float: left;
            margin-left: -230px;
        }
        /* 和圣杯布局的不同点:双飞翼要额外增加标签  
        
        
        
         */
        .centerInner {
            margin: 0 230px 0 200px;
        }
        
        </style>
    </head>
    <body>
        <div class="bigBox">
             <div class="center">
    
                <div class="centerInner">
                 中间盒子 中间盒子 中间盒子 中间盒子 中间盒子 中间盒子 中间盒子 中间盒子 中间盒子 中间盒子 中间盒子 中间盒子 中间盒子
                </div>
                
                </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/795a07452e1d4631b3e6e6580c1d558c.png

发表评论取消回复

表情：

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

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

相关阅读

相关双飞翼布局

<style> * { margin: 0; padding: 0; ...

忘是亡心i/ 2024年04月19日 11:33/ 0 赞/ 6 阅读

相关圣杯布局和双飞翼布局

圣杯布局和双飞翼布局，虽然两者的实现方法略有差异，不过都遵循了以下要点：两侧宽度固定，中间宽度自适应中间部分在 DOM 结构上优先，以便先行渲染允许三

小咪咪/ 2022年12月29日 04:57/ 0 赞/ 128 阅读

相关 css经典布局——双飞翼布局

圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 [《In Search of the Holy Grail》][In Search of

客官°小女子只卖身不卖艺/ 2022年12月06日 04:18/ 0 赞/ 118 阅读

相关 [CSS]双飞翼布局

题目要求： 1.分为三个部分，左中右，先加载中间 2.左右宽为200px，中间自适应答案源码： <!DOCTYPE html> <html lan

电玩女神/ 2022年11月26日 05:59/ 0 赞/ 96 阅读

相关 CSS双飞翼布局实例

<!doctype html> <html> <head> <meta charset="utf-8"> <title>双飞翼布局</t

深碍√TFBOYSˉ_/ 2022年09月25日 06:22/ 0 赞/ 116 阅读

相关 css-圣杯布局和双飞翼布局

1.圣杯布局：（1）父元素中包含左中右三个盒子，并且让他们分别左浮动。（2）将中间的盒子宽度设为100%，并且它在html中代码位置放在左右代码位置的上面（就是所说的第

淩亂°似流年/ 2022年05月29日 12:35/ 0 赞/ 194 阅读

相关圣杯布局和双飞翼布局

圣杯布局与双飞翼布局 -------------------- 圣杯和双飞翼布局都是左右两边固定中间自适应，都是 `负margin`的应用。圣杯布局 -

淩亂°似流年/ 2022年05月21日 02:45/ 0 赞/ 194 阅读

相关圣杯布局和双飞翼布局

圣杯布局圣杯布局就是三栏布局，其中左右两栏固定宽度，中间部分自适应主要步骤： 1. 在html中，中间的块在最前面，后面紧跟左边的块和右边的块 2. 三者均

Bertha 。/ 2022年05月13日 05:24/ 0 赞/ 190 阅读

相关 2.3双飞翼布局

圣杯布局的改进版 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

清疚/ 2022年05月08日 12:46/ 0 赞/ 117 阅读

相关双飞翼布局

[圣杯布局][Link 1] [圣杯+伪等高][Link 2] 目录第一步第二步第三步第四步全部代码双飞翼布局+伪等

迷南。/ 2021年08月28日 20:22/ 0 赞/ 322 阅读