当前位置：首页 > news >正文

css圣杯布局和双飞翼布局

news 2025/7/18 3:07:56

圣杯布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>实现圣杯布局</h1><div id="header">Header</div><div id="content"><!-- 这里注意要将middle即中间区域放在左边和右边前面，因为我们的需求是中间一栏最先加载、渲染出来，根据执行顺序所以把middle放在第一个。 --><div id="center" class="column">center</div><div id="left" class="column">left</div><div id="right" class="column">right</div></div><div id="footer">footer</div>
</body>
<style>body {/* 设置最小宽度，防止挤压使中间内容消失 */ min-width: 500px;}div {text-align: center;}#header {background-color: #f1f1f1;}#content {padding-left: 300px;padding-right: 200px;}#content #center {background-color: #ddd;width: 100%;}#content #left {position: relative;width: 300px;background-color: orange;margin-left: -100%;right: 300px;}#content #right {background-color: green;width: 200px;margin-right: -200px;}
/* 这里当我们给每中间内容的每一栏都加上float:left之后容易导致高度塌陷，解决办法 clear: both; overflow:hidden  */#content .column {float: left;}#footer {/* 清除浮动 */clear: both;background-color: #f1f1f1;}
</style>
</html><!--  问题:高度塌陷 是什么意思
怎么解决: 
overflow:hidden 【这里触发了BFC——BFC是一个独立的布局环境，可以理解为一个看不见的盒子，盒子内部的物品摆放不受外界环境影响。】 
clear:both -->
<!-- 圣杯布局：将中间的三个模块实现成为三栏布局，中间栏自适应，两侧内容宽度固定，三栏布局，中间一栏最先加载，渲染出来 
1.由于中间栏自使用，所以宽度设置为100%，
2.左右两栏使用 float:left 同时使用clear:both 解决高度塌陷的问题
3.将左右两栏的盒子移动上去 【这里通过相对定位我们可以看到是一行挤不下换成了两行，所以想左移动相应的位置就行了向左移动的位置是100%+盒子的宽度】
4.注意设置设置最小宽度，防止挤压使中间内容消失
圣杯布局就是将基本布局之后使用向左浮动，middle栏留出两边位置，然后使用相对定位将左右两栏通过margin-left定位到相应位置。
-->

双飞翼布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>双飞翼布局</title>
</head><body><div class="container"><div class="wrapper"><div class="center">mid</div></div><div class="left">left</div><div class="right">right</div></div>
</body>
<style>.container {height: 100px;}.left {float: left;margin-left: -100%;width: 100px;height: 100px;background: tomato;}.right {float: left;margin-left: -200px;width: 200px;height: 100px;background: gold;}.wrapper {float: left;width: 100%;height: 100px;background: lightgreen;}.center {margin-left: 100px;margin-right: 200px;height: 100px;}
</style></html>