圣杯和双飞翼布局的区别

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

原创最新推荐文章于 2022-03-17 18:11:02 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

圣杯和双飞翼布局都是实现三列布局，中间自适应，左右分栏固定宽度的布局。两者都是通过浮动和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 {
			margin-left: -200px;    
			margin-right: -190px;  
		}实现相同高度，具体不是很了解，后期会补充

		.column {
			position: relative;
			float: left;
		}对左中右三栏实现相对定位和左浮动

		#center {
			padding: 0 20px;
			width: 100%;
		}中间栏的左右设置内边距，避免和左右侧栏重叠。设置自适应宽度

		#left {
			width: 180px;           
			padding: 0 10px;        
			right: 240px;           
			margin-left: -100%;
		}左侧栏宽度，内边距，margin-left通过向左缩进中间栏的宽度，使左分栏和中间栏在同一行（原本由于浮动的先后性，第一行被中间栏占满，左右分栏在第二行呈现）然后通过相对定位，移动自身宽度＋自身内边距＋中间栏内边距到达指定位置）

		#right {
			width: 130px;          
			padding: 0 10px;        
			margin-right: -100%;
		}同理margin-right向左缩进中间栏的宽度，出现在同一行，但由于位置在中间栏右边，故不用相对定位。

		#footer {
			clear: both;
		}清除浮动

双飞翼代码网站

HTML代码如下：

<div class="con">  
            <div class="main">  
                <div class="mc">Main</div>  
            </div>  
            <div class="left">Left</div>  
            <div class="right">Right</div>  
 </div>

CSS代码：

        .left{  
            background: #E79F6D;  
            width:150px;  
            float:left;  
            margin-left: -100%;  
        }  通过margin-left实现与中间栏同行
        .main{  
            background: #D6D6D6;  
            width:100%;  
            float:left;   
        }  这里设置了包裹中间栏的div 可以理解为整个页面的背景
        .mc {  
            margin-left: 150px;  margin-right:190px
        }  设置中间栏的左右内边距来实现与左右栏的分离
        .right{  
            background: #77BBDD;  
            width:190px;  
            float:left;  
            margin-right: -190px;  
        }  通过mrgin-right向左缩进自身宽度，与中间栏呈现在同一行