圣杯布局

最新推荐文章于 2022-03-21 22:38:16 发布

你真好看l

最新推荐文章于 2022-03-21 22:38:16 发布

阅读量80

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_40052011/article/details/103223312

版权

css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <!--
        三列布局应该满足：
        1.两边固定，中间自适应
        2.当中列完整显示 width:100%
        3.当中列要优先加载


        圣杯布局思想:
        1.通过浮动搭建完整布局
        2.通过margin设置负值将right，和left放到和midlle同一行
        3.通过给容器设置padding值空出左右的宽度
        4.通过定位relative将左右两块放到空出来的位置
        -->
    <style>
		*{
			margin: 0;
			padding: 0;
		}
		#header,#footer{
			height: 10px;
			background-color: yellow;
		} 
		#content{
			padding: 0 100px;
		}
		#content .middle{
			float:left;
			width:100%;			
			background-color: green;
		}
		#content .left{
			float:left;
			position:relative;
			left:-100px;
			margin-left:-100%;/*margin的百分比参照于包含块,margin为负值只影响边界*/
			width: 100px;

			background-color: red;
		}
		#content .right{
			float:left;
			position: relative;
			right: -100px;
			width: 100px;
			margin-left: -100px;
			background-color: blue;
		}
        .clearfix:after{
			content:"";
			display: block;
			clear: both;
		}
        /*加入伪等高布局*/
		#content{
			overflow: hidden;
		}
		#content.middle,#content .left,#content .right{
			padding-bottom: 1000px;/*padding填充背景*/
			margin-bottom: -1000px;/*margin负值将边界收回*/
		}
    
    </style>
</head>
<body>
    <div id="header"></div>
    <div id="content" class="clearfix">
        <div class="middle">
            <p>middle</p>
            <p>middle</p>

            <p>middle</p>
            <p>middle</p>        
            middle
        
        </div>
        <div class="left">

            <p>left</p>
        </div>
        <div class="right">right</div>
    </div>
    <div id="footer"></div>



    
</body>
</html>

在这里插入图片描述

你真好看l

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫