1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>双飞翼</title> 6 <style> 7 div { 8 min-height: 300px; 9 display:block; 10 } 11 .div { 12 width: 100%; 13 background-color: blue; 14 margin:0 auto; 15 } 16 .main { 17 width:100%; 18 background:red; 19 float:left; /* 先定主体 */ 20 } 21 .left { 22 float:left; 23 background:yellow; 24 margin-left:-100%; /* 关键! 确定左边翅膀 */ 25 width:300px; 26 } 27 .right { 28 float:left; 29 background: yellow; 30 width: 200px; 31 margin-left:-200px; /* 关键! 确定右边翅膀 */ 32 } 33 .mainframe { /* 关键! 因主体被挡住,因此需要 两边留出空白,把主体内容聚在中间集中显示 */ 34 margin-left: 300px; 35 margin-right: 200px; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="div"> 41 <div class="main"> 42 <div class="mainframe"> 43 这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容 44 </div> 45 </div> 46 <div class="left">这是左边内容</div> 47 <div class="right">这是右边内容</div> 48 </div> 49 </body> 50 </html>
双飞翼布局的思路是
先把 整个布局的 “主体” 确定好
然后再确定 “翅膀” 的位置
最后根据 “翅膀” 的大小,给 “主体” 部分两边留白。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <! doctype html> < html > < head > < meta charset="utf-8"/> < title >圣杯</ title > < style > div { min-height: 300px; display: block; } .div { margin: 0 auto; padding: 0 200px 0 300px; /* 防止左右两边挡住内容 */ } .main,.left,.right { float: left; position: relative; /* 后面需要用到 left */ } .main { width:100%; background-color: red; } .left { width: 300px; background-color: yellow; margin-left: -100%; /* 移动到主体的左边部分 */ left: -300px; /* 使用相对定位, 将左边部分移动到父框架的 左边 padding 部分 */< br > } .right { width: 200px; background-color: yellow; margin-left: -200px; /* 移动到主体的右边部分 */ right: -200px; /* 使用相对定位,讲右边部分移动到父框架的 右边 padding 部分 */ } </ style > </ head > < body > < div class="div"> < div class="main"> 这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子 </ div > < div class="left">这是左边内容</ div > < div class="right">这是右边内容</ div > </ div > </ body > </ html > |
圣杯布局的思路是
先 左右两边框利用 margin-left 移动到相应的位置
然后 利用 主体 的padding 部分 给 左右两边框留白
接着 左右两边框 利用 relative 的 left 和 right 移动到留白的部分
双飞翼布局 和 圣杯布局 的优点 在于
1、自适应布局,两边的宽度确定好后,主体部分可以随着窗口的变化而变化
2、主体 部分 在 HTML文档里在 “翅膀” 部分的前面,浏览器会优先加载 重要的主体部分,加载完毕 再去加载 次要部分。
两者都采用了 margin-left 来定位左右边框,只是对 主体 的遮挡部分处理的方式不一样。
双飞翼布局是采用了 添加一个子框架,然后利用子框架的 margin-left 和margin-right 将内容从遮挡处移出来;
而圣杯布局则采用了 主体部分的 padding ,利用该属性 给两边留白,然后左右部分则采用 relative 的left 和right 移出 主体部分,
移到 主体部分的 padding区域。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥