圣杯和双飞翼布局的区别

最新推荐文章于 2022-03-17 18:11:02 发布

Stark6

最新推荐文章于 2022-03-17 18:11:02 发布

阅读量297

点赞数

本文链接：https://blog.csdn.net/Stark6/article/details/80575430

版权

本文探讨了圣杯和双飞翼布局在实现三列布局中的应用，两者都利用浮动和负margin，但圣杯依靠相对定位固定边栏，而双飞翼则通过内容包裹及浮动定位。文章提供了简化版的HTML和CSS代码示例。

摘要由CSDN通过智能技术生成

圣杯和双飞翼布局都是实现三列布局，中间自适应，左右分栏固定宽度的布局。两者都是通过浮动和margin的负值来布局的，其主要区别是圣杯使用相对定位来固定左右分栏，双飞翼将中间的内容用div包裹，左右分栏通过浮动来定位。

圣杯代码网站

HTML代码如下（为方便阅读和理解，我已将不重要的内容删去）：

<body>
	<div id="header">header</div>

	<div id="center" class="column">中间内容</div>  这里需要注意的是先编写中间栏

	<div id="left" class="column">左侧分栏</div>

	<div id="right" class="column">右侧分栏</div>

	<div id="footer">Tfooter</div>
</body>

CSS代码：

		body {
			margin: 0;
			padding-left: 200px;    
			padding-right: 190px;   
			min-width: 240px;      
		}首先设置body元素，左右内边距用来放左右侧栏，最小宽度用来保证中间自适应区域的宽度

		#header, #footer {