双飞翼布局（一般用于PC端网页布局）

谁借莪１个温暖的怀抱￠ 2022-10-28 03:54 138阅读 0赞

## 1. 布局目的 ##

1.  两侧内容宽度固定，中间内容宽度自适应
2.  三栏布局，中间一栏最先加载、渲染出来（主要内容）

## 2. 实现方法：float + margin ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>双飞翼布局</title>
        <style> div { text-align: center; } #main { background-color: #ddd; width: 100%; } /* 留出左边和右边的距离 margin-left: 100px; 和 left宽度一样 margin-right: 50px; 和 right宽度一样 */ #main #main-wrapper { margin-left: 100px; margin-right: 50px; } /* margin-left: -100%; 这里的100%是指main的宽度 */ #left { background-color: orange; width: 100px; margin-left: -100%; } #right { background-color: green; width: 50px; margin-left: -50px; } .column { float: left; } </style>
    </head>
    
    <body>
        <h1>实现双飞翼布局</h1>
        <div id="main" class="column">
            <div id="main-wrapper">Main</div>
        </div>
        <div id="left" class="column">Left</div>
        <div id="right" class="column">Right</div>
    </body>
    
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关双飞翼布局

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

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

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

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

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

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

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

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

相关 [CSS]双飞翼布局

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

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

相关双飞翼布局（一般用于PC端网页布局）

1. 布局目的 1. 两侧内容宽度固定，中间内容宽度自适应 2. 三栏布局，中间一栏最先加载、渲染出来（主要内容） 2. 实现方法：float + margin

谁借莪１个温暖的怀抱￠/ 2022年10月28日 03:54/ 0 赞/ 139 阅读

相关圣杯布局（一般用于PC端网页布局）

1. 圣杯布局目的 1. 两侧内容宽度固定，中间内容宽度自适应 2. 三栏布局，中间一栏最先加载、渲染出来（主要内容） 2. 实现方法：float + margi

曾经终败给现在/ 2022年10月28日 03:38/ 0 赞/ 164 阅读

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

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

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

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

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

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

相关 2.3双飞翼布局

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

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

相关双飞翼布局

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

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