Heim > Artikel > Web-Frontend > 圣杯布局与双飞翼布局_html/css_WEB-ITnose
圣杯布局与双飞翼布局_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:19:071308Durchsuche
圣杯布局和双飞翼布局的目的都是：左右两栏固定宽度，中间部分自适应；
圣杯布局
圣杯布局HTML：
<div class="wrap"> <div class="main"> 我是主要 </div> <div class="left"> 我是左边 </div> <div class="right"> 我是右边 </div></div>
圣杯布局CSS:
* { margin: 0; padding: 0}.main { background-color: yellow; height: 100px; float: left; width: 100%;}.left { background-color: red; width: 200px; height: 100px; float: left; margin-left: -100%; /*margin负边距*/ position: relative; /*相对自身偏移*/ left: -200px; }.right { background-color: blue; width: 200px; height: 100px; float: left; margin-left: -200px; /*margin负边距*/ position: relative; /*相对自身偏移*/ right: -200px; }.wrap { padding: 0 200px; /*父级设置padding*/} 圣杯布局的优点：
使主要内容列先加载。
允许任何列是最高的。
没有额外的div。
需要的hack很少。
双飞翼布局
双飞翼HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <title> 双飞翼布局 </title> <link rel="stylesheet" href="main.css"/> </head> <body> <div class="main-wrap"> <!-- 把main嵌套在一个div里面 --> <div class="main"> 我是主要 </div> </div> <div class="left"> 我是左边 </div> <div class="right"> 我是右边 </div> </body></html>
双飞翼CSS
.main-wrap { float: left; width: 100%;}.main { height: 100px; margin-left: 200px; /*利用左、右外边距定位*/ margin-right: 200px; background-color: yellow;}.left { background-color: red; width: 200px; height: 100px; float: left; margin-left: -100%;}.right { background-color: blue; width: 200px; height: 100px; float: left; margin-left: -200px;} 圣杯布局和双飞翼的比较：
1.两种布局都是把主要内容放在前面加载；
2.布局有相似之处，都使用了负外边距来布局；
3.不同：
圣杯布局是设置 父容器的padding值、相对定位来实现；
双飞翼布局是给main添加了一个div容器、设置main的左右外边距 来实现；
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS行高line-height_html/css_WEB-ITnoseNächster Artikel：第 28 章 CSS3 多列布局_html/css_WEB-ITnose