双飞翼

圣杯布局和双飞翼布局

阅读更多关于圣杯布局和双飞翼布局

区别就是一个采用大包三个小，用了相对布局，另一个大包中间的一个，不需要使用定位，更加简洁，且允许的页面最小宽度通常比圣杯布局更小。圣杯布局： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>圣杯</title> <style> #foot{ clear: both; } #container{ padding: 0 150px 0 200px; } #main{ width: 100%; background-color: red; } #left{ width: 200px; background-color: yellow; margin-left: -100%; position: relative; left: -200px; } #right{ width: 150px; background-color: blue; margin-right: -150px; } .ele{ height: 500px; float: left; } </style> </head> <body style="padding: 0;">  <div></div> <div id="container">

经典三栏布局之圣杯、双飞翼、弹性布局

阅读更多关于经典三栏布局之圣杯、双飞翼、弹性布局

经典三栏布局之圣杯、双飞翼、弹性布局圣杯布局和双飞翼布局是前端工程师需要掌握的布局方式，两者功能相同，都是为了实现两侧宽度固定，中间宽度自适应的布局方式，此外，使用新增的 flex布局，可以使布局更加简单。双飞翼布局和圣杯布局虽然实现方式有所差异，但是基本上都遵循了以下几点：两侧宽度固定，中间宽度自适应中间结构在DOM上优先，以便于优先渲染下面依次介绍圣杯布局、双飞翼布局、弹性布局实现三栏布局圣杯布局一、搭建主体结构我们先搭建主体框架，将主体结构写出来 <div class="header"></div> <div class="container"></div> <div class="footer"></div> 我们将为左右预留出一定的空间，作为左右固定两栏的位置 .container{ padding-left:200px; padding-right:150px; } 这时，我们的主体结构变成这样了二、添加中、左、右三列接下来我们将左、中、右三列添加到主体框架中 <div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class

圣杯布局和双飞翼布局

阅读更多关于圣杯布局和双飞翼布局

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。圣杯布局来源于文章 In Search of the Holy Grail ，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，不过都遵循了以下要点：两侧宽度固定，中间宽度自适应中间部分在DOM结构上优先，以便先行渲染允许三列中的任意一列成为最高列只需要使用一个额外的 <div> 标签下面我将依次介绍圣杯布局和双飞翼布局的实现方法，并在最后根据个人思考对原有方法做出一些修改，给出其它一些可行的方案。圣杯布局 1. DOM结构 <div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div> 首先定义出整个布局的DOM结构，主体部分是由 container 包裹的 center , left , right 三列，其中 center 定义在最前面。 2. CSS代码假设左侧的固定宽度为200px，右侧的固定宽度为150px

圣杯布局和双飞翼布局

阅读更多关于圣杯布局和双飞翼布局

　　圣杯布局及双飞翼布局主要用于解决左右两边盒子固定宽度。中间盒子宽度自适应的问题。　　圣杯布局： <!doctype html> <html> <head> <title>圣杯布局</title> <meta charset="utf-8"> <style> body { min-width: 800px; margin: 0; padding: 0; } .container { padding: 0 300px 0 200px; overflow: hidden; } .header { width: 100%; height: 100px; background-color: lightblue; } .footer { width: 100%; height: 50px; background-color: lightblue; } .middle, .left, .right{ position: relative; } .middle { float: left; width: 100%; height: 100px; text-align: center; background: lightcoral; } .left { float: left; width: 200px; margin-left: -100%; left:-200px; height:

双飞翼布局

阅读更多关于双飞翼布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style> *{ padding: 0; margin: 0; } .container{ width: 100%; height: 100%; background-color: red; min-height: 500px; float: left; } .container .center{ margin-left: 200px; margin-right: 150px; background-color: green; } .left{ float: left; width: 200px; height: 100px; background-color: pink; margin-left: -100%; } .right{ float: left; width: 150px; height: 100px; background-color: purple; margin-left: -150px; } </style></head><body></body><div class="container"> <div class="center"> 451 </div></div><div class=

圣杯布局和双飞翼布局

阅读更多关于圣杯布局和双飞翼布局

圣杯布局和双飞翼布局的目的：　　1.三栏布局，中间一栏最先加载和渲染（内容最重要）　　2. 两侧内容固定，中间内容随着宽度自适应　　3. 一般用于 PC 网页圣杯布局实现思路：　　 1. 将最外层的container的padding 设置为 padding: 0 150px 0 200px; 为左右两块让出空间；　　2. 将.middle，.left ，.right 三者设为浮动；　　3. 将middle 的 width设置为 100%; 　　4. 分别给.left设置margin-left,.right设置margin-right;将left 和right 拉到与middle同一水平；　　5. 再用定位将左右位置设置好圣杯布局具体代码实现：　　 html代码： <div class="container"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div> 　　css代码： .container{ padding: 0 150px 0 200px; overflow: hidden; } .middle,.left,.right{ float: left; height: 200px; } .left{

圣杯布局和双飞翼布局

经典三栏布局之圣杯、双飞翼、弹性布局

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局

双飞翼布局

圣杯布局 和 双飞翼布局

圣杯布局和双飞翼布局