圣杯式三栏布局

最新推荐文章于 2024-06-17 00:08:19 发布

await play;

最新推荐文章于 2024-06-17 00:08:19 发布

阅读量298

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42469247/article/details/84328222

圣杯式三栏布局的原理：

html：

设置三个div，id依次分别为 main left right 并且被一个id为father的父级div将其所包含。（将main放在第一个设置width为100%；能够使其实现自适应。left和right更方便到达指定位置。）

<div class="father">
	    <div class="main col"></div>
	    <div class="left col"></div>
	    <div class="right col"></div>
</div>

css：

之后对father设置padding：0 120px 0 120px；

padding中属性值上下内边距就不用解释了，左右边距分别为左右两栏的固定宽度。

给两边的left 和right两栏设置其固定的宽度如

#left{
    width: 120px;					/*设置两边的宽度*/
}
#right{
    width: 120px;					/*设置两边的宽度*/
}

对main left 以及 right添加float：left；position：relative；和高度

相对定位能够相对自己的位置进行移动。当空间不足的时候移动到上一行

给left栏设置margin-left：-100%；给right栏设置margin-right其值为负的它本身的宽度，根据上边设置的right宽度为120px：所以

#right{
    margin-left:-120px;
}

这些设置完成之后，结构大概是这样的：

这样的结果还不行，因为这时候两边的两栏覆盖了main栏，这时候需要添加样式：

#left{
    right:120px;        /*把图像的右边缘设置在其包含元素右边缘向左 120 像素的位置*/
}
#right{
    left:120px;
}

完成之后，三栏布局就大功告成了。

最后的结果

这时候，我们还可以给三栏布局中添加间隙，

只需要将padding：0 120px 0 120px；修改成为padding：0 140px 0 140px；

并增加right和left的值

#left{
    right:140px;        /*把图像的右边缘设置在其包含元素右边缘向左 140 像素的位置*/
}
#right{
    left:140px;
}

比原来多出来的像素就是间距的大小。

最后附上所有的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
	.father{
		padding: 0 120px;				/*对整体div设置内边距，之后将两边div移到内容区以外*/
	}
	.col{
	    float: left;					/*使用浮动，使用margin-left就可以移到上一行*/
	    height: 200px;					
	    position: relative;             /*采用相对定位，相对自己的位置挪出去*/
	}
	.left,.right{
	    width: 100px;					/*设置两边的宽度*/
	}
	.left{
	    background-color: blue;
	    margin-left: -100%;
	    right: 120px;					/*把图像的右边缘设置在其包含元素右边缘向左 120 像素的位置*/
	}
	.right{
	    background-color: green;
	    margin-left: -100px;
	    left: 120px;
	}									
	.main{
	    width: 100%;
	    background-color: pink;
	}
	</style>
</head>
<body>
    <div class="father">
	    <div class="main col"></div>
	    <div class="left col"></div>
	    <div class="right col"></div>
	</div>
</body>
</html>