css-圣杯布局和双飞翼布局

最新推荐文章于 2022-06-28 10:11:14 发布

小白银

最新推荐文章于 2022-06-28 10:11:14 发布

阅读量211

点赞数

分类专栏： css 文章标签：圣杯布局和双飞翼布局的联系与差异

本文链接：https://blog.csdn.net/mozhu1997/article/details/79672761

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.圣杯布局：

（1）父元素中包含左中右三个盒子，并且让他们分别左浮动。

（2）将中间的盒子宽度设为100%，并且它在html中代码位置放在左右代码位置的上面（就是所说的第一个渲染）。

（3）左右两边使用margin-left的负值，使他们与中间的盒子同行，（左边：-100%，右边：-右边盒子的宽度）。

（4）父元素用padding为左右盒子留位置。

（5）用相对定位将左右盒子移到正确的位置上

（6）给父元素清除浮动

代码如下：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局</title>
	<style type="text/css">
	.main{width: 810px;height: 400px;border: 1px  blue solid;padding-top: 25px;padding-left: 10px;padding-right: 10px;}
	._center{width: 100%;height: 350px;text-align: center;line-height: 350px;float: left;background-color: #eeeeee}
	._left{width: 200px;height: 350px;left: 20px;top:25px;text-align: center;line-height: 350px;float: left;margin-left: -100%;background-color: red;}
	._right{width: 200px;height: 350px;right:20px;top:25px;text-align: center;line-height: 350px;float: left;margin-left:-200px;background-color: green;}
	</style>
</head>
<body>
	<div class="main clearfix">
		<div  class="_center">我是中间</div>
		<div class="_left">我是左边</div>
		<div  class="_right">我是右边</div>
	</div>
</body>
</html>

效果图：

2.双飞翼布局：
（1）父元素中包含左中右三个盒子，并且让他们分别左浮动。

（2）将中间的盒子宽度设为100%，并且它在html中代码位置放在左右代码位置的上面（就是所说的第一个渲染）。

（3）左右两边使用margin-left的负值，使他们与中间的盒子同行，（左边：-100%，右边：-右边盒子的宽度）。

（4）给中间元素设置子元素，并给其左右margin为左右盒子留位置

（6）给父元素清除浮动.

代码如下：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>双飞翼布局</title>
	<style type="text/css">
	.main{width: 800px;height: 400px;padding-top: 25px;margin: 0;}
	._center{width: 100%;height: 350px;float: left;background-color: #eeeeee;}
	._center>div{margin: 0 200px 0 200px;}
	._left{width: 200px;height: 350px;left: 20px;top:25px;text-align: center;line-height: 350px;float: left;margin-left: -100%;background-color: red;}
	._right{width: 200px;height: 350px;right:20px;top:25px;text-align: center;line-height: 350px;float: left;margin-left:-200px;background-color: green;}
	</style>
</head>
<body>
	<div class="main clearfix">
		<div  class="_center">
			<div>我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间</div>
		</div>
		<div class="_left">我是左边</div>
		<div  class="_right">我是右边</div>
	</div>
</body>
</html>

效果如下：

注：为中间元素设置子元素，并为其设置margin,目的是为了中间元素的内容可以在中间显示，margin的左右值为左右盒子的宽度。

小白银

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-圣杯布局和双飞翼布局

1.圣杯布局：（1）父元素中包含左中右三个盒子，并且让他们分别左浮动。（2）将中间的盒子宽度设为100%，并且它在html中代码位置放在左右代码位置的上面（就是所说的第一个渲染）。（3）左右两边使用margin-left的负值，使他们与中间的盒子同行，（左边：-100%，右边：-右边盒子的宽度）。（4）父元素用padding为左右盒子留位置。（5）用相对定位将左右盒子移到正确的...
复制链接

扫一扫