CSS 圣杯布局

川长思鸟来 2022-05-12 13:58 169阅读 0赞

圣杯布局，不要被名字所迷惑只是一种简单的布局方式，也不知道从何时起，这种布局方式有了这么响亮的外号。

CSS+DIV 最常见的分栏布局就是浮动布局啦，以Bootstrap框架的栅格系统为代表，现广大框架的布局基本都是这种浮动布局方式。

圣杯布局有一个非常好的特点就是减少计算。设现在做一个三栏布局，那么要计算左-中-右三个盒子的宽度，使用圣杯布局只需要左-右两个盒子的宽度（是减少计算，不是不要计算，勿喷！）。再次申明，这只是一种布局式。可以在合理的场景下使用

源码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>圣杯布局</title>
        <style type="text/css">
        	body{
        		margin: 0;
        		padding: 0;
        		background-color: #F3F3F3;
        		font-size: 14px;
        		font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
        		letter-spacing: 0;
        		color: #333333;
        	}
        	/* 圣杯布局 - 开始 */
        	.row{
        		padding: 0 200px 0 220px;
        		position: relative;
        		overflow: hidden;
        		height: auto;
        	}
        	.row .left{
        		width: 220px;
        		height: 400px;
        		background-color: #09f;
        		float: left;
        		margin-left: -220px;
        	}
        	.row .right{
        		width: 200px;
        		height: 600px;
        		background-color: #f90;
        		float: right;
        		margin-right: -200px;
        	}
        	.row .main{
        		height: 800px;
        		background-color: #9f0;
        	}
        	/* 圣杯布局 - 结束 */
    
        	h1{
        		font-size: 60px;
        		color: #fff;
        		text-align: center;
        		padding: 50px 15px;
        		margin: 0;
        	}
        </style>
    </head>
    <body>
    	<div class="row">
    		<div class="left"></div>
    		<div class="right"></div>
    		<div class="main">
    			<h1>圣杯布局</h1>
    			<h1>WEB前端梦之蓝</h1>
    			<h1>web-7258</h1>
    			<h1>helang.love@qq.com</h1>
    		</div>
    	</div>
    </body>
    </html>

除了【圣杯布局】还有一种【双飞翼布局】，不知道谁给取的名字，只能说这名字真好听！

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220504/bc4e044cee0c4e26a527b24e3878da13.png