圣杯布局

wybxzht

于 2020-08-13 15:14:19 发布

阅读量150

点赞数

分类专栏：前端——布局文章标签： css html html5

本文链接：https://blog.csdn.net/wybxzht/article/details/107980011

版权

前端——布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

圣杯布局

实现目标：

三栏布局
浏览器页面宽度变化时，左右内容不变，中间内容自适应

实现思路：

整体浮动，中间内容在最前面，方便渲染，宽度width：100% = 父元素宽度
左右宽度恒定
将左右移动到自己应该去的位置，position/-margin等方法实现
父元素设置min-width

实现效果：

圣杯布局

实现代码：

<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>圣杯布局</title>
	</head>
	<style>
	    *{
	        margin: 0;
	        padding: 0;
	    }
	    .header,.footer{
	        width: 100%;
	        height: 100px;
	        background: silver;
	        text-align: center;
	        line-height: 100px;
	        font-weight: bold;
	        font-size: 40px;
	    }    
	    .box::after{
	        content: ".";
	        clear: both;
	        display: block;
	        visibility: hidden;
	        height: 0;
	    }
	    .box{
	        min-width: 100px;
	        margin: 0 auto;
	    }
	    .box>div{
	        float: left;
	        text-align: center;
	        font-size: 30px;
	    }
	    .cen{
	        width: 100%;
	        height: 500px;
	        line-height: 500px;
	        padding: 0 300px 0 100px;
	        background: purple;
	        box-sizing: border-box;
	    }
	    .lf{
	        line-height: 400px;
	        width: 100px;
	        margin-left: -100%;
	        background: gold;
	        height: 400px;
	    }
	    .rf{
	        line-height: 300px;
	        width: 300px;
	        margin-left: -300px;
	        /* margin-right: -300%; */
	        background: orange;
	        height: 300px;
	    }
	</style>
	<body>
	    <div class="header">header</div>
	    <div class="box">
	        <div class="cen">
	            center
	        </div>
	        <div class="lf">
	            left
	        </div>
	        <div class="rf">
	            right
	        </div>
	    </div>
	    <div class="footer">footer</div>
	</body>
	</html>