三栏布局与圣杯布局

最新推荐文章于 2023-02-24 15:33:36 发布

村上龙的蓝

最新推荐文章于 2023-02-24 15:33:36 发布

阅读量334

点赞数

分类专栏： css 文章标签：圣杯布局 css html 三栏布局

本文链接：https://blog.csdn.net/lynnYuan_/article/details/82152948

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

三栏布局是一种比较常见的布局，在一些大型网站上也常被使用。通常表现为，两边固定，中间自适应。

常常提及的圣杯布局与双飞翼布局就属于三栏布局的一种。

下面先介绍我常用的两种三栏布局方法：绝对定位法和负边距法以及常提及的圣杯布局

绝对定位法

负边距法

圣杯布局

绝对定位法：

如果你从来没有实现过三栏布局，那么这个方法你很容易自己想出来。

大概思路：写出三栏，左右两栏绝对定位到两边，中间利用margin来找宽度。

<body>
    <div id="left"></div>
    <div id="main"></div>
    <div id="right"></div>
</body>

html,body{margin:0; height:100%;}
#left,#right{position:absolute; top:0; width:200px; height:100%;}
#left{left:0; background:#444444;}
#right{right:0; background:#444444;}
#main{margin:0 210px;height:100%;}

负边距法：

该方法也很好理解，圣杯布局也采用了这种方法。当初学习该方法，参考的是张鑫旭大神的文章

首先先搭出该方法的框架，这个框架与上一个方法不太一样：中间部分要用两层标签表示，也就是在原来的基础上再套一层标签

<body>
	<div class="main">
		<div class="middle">我是c位</div>
	</div>
	<div class="left">left</div>
	<div class="right">right</div>
	
</body>

下面写css

html,body{height: 100%;margin: 0;}
	.left,.right,.main{float: left;}
	.main{width: 100%}
	.middle{margin: 0 210px;}
	.left{width:200px;background-color: #444444 ;margin-left: -100%;}
	.right{width:200px;background-color: #444444 ;margin-left: -200px;}

css我没有给高度。

先看一下效果图

其实这个方法的原理很简单，首先要明确两个观念：1：margin的百分数值取得是父元素

2：三个元素都浮动

我们先看一下没有给left，和right栏负边距的情况：

三个元素都浮动，因为main中间部分为100%，所以同样作为浮动元素的left和right被挤在了图片的位置上。而我们给left设置margin-left：100%，left移动了父

元素的宽度（也是main元素的宽度）。而right只需移动自身的大小，就可以到右栏位置

圣杯布局：

圣杯布局也是三栏布局的一种，于此相像的还有双飞翼布局。文章学习参考这里

圣杯布局有固定的框架：主要有头部，中间部分（分为三栏），尾部

代码如下：

<body>
	<div id="header"></div>
	<div id="container">
  		<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"></div>
</body>

css部分：

#header{width: 100%;height: 40px;background-color: #252525}
#container{	
	padding-left: 200px;
	padding-right: 150px;
}
#footer{width: 100%;height: 20px;background-color:#252525 ;clear: both;}
.column{float: left;position: relative;}
#center{width: 100%;}
#left{width: 200px;margin-left: -100%;left:-200px;background-color: #4095B5}
#right{width: 150px;margin-left: -150px;right:-150px;background-color: #4095B5}

头部和尾部就是正常的div，不过尾部需要帮助我们清除一下浮动。

这里的三栏布局，利用定位+负边距。首先将中间部分padding，已留出左栏和右栏的位置。之后再利用负边距，将三栏在同一水平线上，最后利用定位，把左栏右栏移到padding中，就实现一个圣杯布局的框架！

村上龙的蓝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三栏布局与圣杯布局

三栏布局是一种比较常见的布局，在一些大型网站上也常被使用。通常表现为，两边固定，中间自适应。常常提及的圣杯布局与双飞翼布局就属于三栏布局的一种。下面先介绍我常用的两种三栏布局方法：绝对定位法和负边距法以及常提及的圣杯布局目录绝对定位法负边距法圣杯布局绝对定位法：如果你从来没有实现过三栏布局，那么这个方法你很容易自己想出来。大概思路：写出三栏，左右两栏绝对定位到两...
复制链接

扫一扫