圣杯布局

最新推荐文章于 2024-07-20 15:40:46 发布

lzh(๑′ᴗ‵๑)

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量125

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/v02040212/article/details/104225024

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

圣杯布局

需求分析

两边固定，当中自适应
当中列要完整显示
当中列要优先加载

技术点总结

1.浮动：搭建完整的布局框架

元素与元素之间的边界是由margin控制的，由于块级元素独占一行
所以必须先让 left 和 right 向左浮动，然后清除content 的浮动

2.margin 为负值：调整旁边两列的位置(使三列布局到一行上)

middle 的有边界和 left 的左边界其实是合在一块的，只不过一行放不下，换行了所以应该让left的左边界的 margin-left 推一个 middle 的宽度
margin-left 为负值，即往里面去缩，虽然改变了元素的边界，但不改变元素的位置

3.使用相对定位：调整旁边两列的位置（使两列位置调整到两头）

left 和 middle 的参照物一样，都是 content
故应该给容器 content 加padding（上下为0，左右为200px）
最后给 left 来一个相对定位

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>圣杯布局</title>
		<style type="text/css">
		 	*{
				margin: 0;
				padding: 0;
			}
			
			#header,#footer{
				height: 20px;
				text-align: center;
				border: 1px solid deeppink;
				background: gray;
			}
			
			#content{
				overflow: hidden;
				padding: 0 200px;
			}
			
			/* 伪等高布局 */
			#content .middle , #content .left , #content .right{
				padding-bottom: 10000px;
				margin-bottom: -10000px;
			}
			
			#content .middle{
				float: left;
				width: 100%;
				background: pink;
			}
			
			#content .left{
				position: relative;
				left: -200px;
				/* margin-left只动元素边界，不动元素位置 */
				margin-left: -100%;
				float: left;
				background: yellow;
				width: 200px;
			}
			
			#content .right{
				position: relative;
				right: -200px;
				margin-left: -200px;
				float: left;
				background: yellow;
				width: 200px;
			}
			
			/* 清除浮动 */
			.clearfix{
				*zoom:1;
			}
			.clearfix:after{
				content:"";
				display: block;
				clear: both;
			}
		 </style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="content" class="clearfix">
			<div class="middle">
				<h4>middle</h4>
				<h4>middle</h4>
				<h4>middle</h4>
				<h4>middle</h4>
				<h4>middle</h4>
				<h4>middle</h4>
				<h4>middle</h4>
				<h4>middle</h4>
				<h4>middle</h4>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div id="footer">footer</div>
	</body>
</html>

效果展示

圣杯布局效果展示

lzh(๑′ᴗ‵๑)

关注

0
点赞
踩
0

收藏

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

需求两边固定，当中自适应当中列要完整显示当中列要优先加载问题解决解决 left 和 right 上不去的问题(边界问题)元素与元素之间的边界是由margin控制的，由于块级元素独占一行，lefe 和 right 是上不去的，首先，让left 和 right 向左浮动，然后清除content 的浮动，目的：让left的左边界的margin-left 推一个middle 的宽度...
复制链接

扫一扫

专栏目录