圣杯布局和双飞翼布局
Posted qq965921539
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了圣杯布局和双飞翼布局相关的知识,希望对你有一定的参考价值。
区别就是一个采用大包三个小,用了相对布局,另一个大包中间的一个,不需要使用定位,更加简洁,且允许的页面最小宽度通常比圣杯布局更小。
圣杯布局:
<!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;"> <!-- 圣杯布局(float + 负margin + padding + position) --> <div></div> <div id="container"> <div id="main" class="ele">1</div> <div id="left" class="ele">2</div> <div id="right" class="ele">3</div> </div> <div id="foot"></div> <script> console.log(...[1, 2, 3], [1, 2, 3]); </script> </body> </html>
双飞翼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>双飞翼</title> <style> #foot clear: both; #container width: 100%; #main height: 100%; margin-left: 200px; margin-right: 150px; background-color: red; #left width: 200px; background-color: yellow; margin-left: -100%; #right background-color: blue; width: 150px; margin-left: -150px; .ele height: 500px; float: left; </style> </head> <body style="padding: 0;"> <div></div> <div id="container" class="ele"> <div id="main">1</div> </div> <div id="left" class="ele">2</div> <div id="right" class="ele">3</div> <div id="foot"></div> <script> console.log(...[1, 2, 3], [1, 2, 3]); </script> </body> </html>
以上是关于圣杯布局和双飞翼布局的主要内容,如果未能解决你的问题,请参考以下文章