标签：round ons div red osi 简洁 页面 containe head
区别就是一个采用大包三个小，用了相对布局，另一个大包中间的一个，不需要使用定位，更加简洁，且允许的页面最小宽度通常比圣杯布局更小。
圣杯布局：
<!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>
标签：round ons div red osi 简洁 页面 containe head
原文地址：https://www.cnblogs.com/qq965921539/p/11421077.html
