[CSS]双飞翼布局

电玩女神 2022-11-26 05:59 161阅读 0赞

**题目要求：**  
1.分为三个部分，左中右，先加载中间  
2.左右宽为200px，中间自适应

**答案源码：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div class="main">
            
            <div class="mid">
                <div class="mid-content">中间部分</div>
            </div>
            <div class="left">左边部分</div>
            <div class="right">右边部分</div>
        </div>
    </body>
    <style>
        .main { 
            padding: 0;
            margin: 0;
        }
    
        .main div { 
            float: left;
            /* 使三个区域向左浮动 */
        }
    
        .mid { 
            background: yellow;
            width: 100%;
            /* 设置mid宽度为100，此时left和right就被挤到了第二行 */
        }
    
        .left { 
            background: red;
            width: 200px;
            margin-left: -100%;
            /* 将left挤到第一行，且在mid左边 */
        }
    
        .right { 
            background: blue;
            width: 200px;
            margin-left: -200px;
            /* 将right挤到第一行，且在mid右边 */
        }
    
        .mid-content{ 
            /* 写完上方后，此时left和right各把mid的左右200px遮住 */
            /* 所以我们选择在mid中加一个mid-content，margin左右各200px */
            margin-left: 200px;
            margin-right: 200px;
    
        }
    </style>
    
    </html>

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 css圣杯布局和双飞翼布局_CSS布局和格式

css圣杯布局和双飞翼布局 While CSS1 didn’t have much to offer for the graphical layout of document

深藏阁楼爱情的钟/ 2022年12月03日 11:25/ 0 赞/ 202 阅读

相关 [CSS]双飞翼布局

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

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

相关 CSS双飞翼布局实例

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

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

相关 DIV+CSS布局之圣杯布局与双飞翼布局

圣杯布局 & 双飞翼布局简单介绍一下什么是双飞翼布局和圣杯布局：它们俩都是为了解决三栏布局问题，左右栏宽度固定，中间栏自适应（随着父盒子大小改变而改变）。中间栏要放

谁践踏了优雅/ 2022年06月03日 05:44/ 0 赞/ 223 阅读

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

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

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

相关 2.3双飞翼布局

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

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

相关 CSS 圣杯布局 / 双飞翼布局的实现

工作的越久，有些基础知识我们可能就逐渐淡忘了，今天我们来回顾一下css的圣杯布局和双飞翼布局，这两个名词你可能不熟，那三栏布局你肯定就非常熟悉了，就是两边定宽，中间

爱被打了一巴掌/ 2022年02月02日 06:15/ 0 赞/ 294 阅读

相关 CSS三栏布局：圣杯布局、双飞翼布局

其实三栏布局比较简单，而且方法也有很多。今天了解了一下传统的三栏布局方法：圣杯布局、双飞翼布局，本文简单记录一下。所谓三栏布局，通常是指左右两栏定宽，中间一栏自适应页面宽

爱被打了一巴掌/ 2022年01月17日 11:07/ 0 赞/ 313 阅读

相关双飞翼布局

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

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