圣杯布局双飞翼布局

最新推荐文章于 2023-09-19 19:46:20 发布

玐也很可爱呀

最新推荐文章于 2023-09-19 19:46:20 发布

阅读量142

点赞数

文章标签：圣杯布局双飞翼布局 flex布局

本文链接：https://blog.csdn.net/qq_41339975/article/details/101425720

版权

圣杯布局和双飞翼布局都是属于三栏布局，左中右，左右固定宽度，中间自适应，不同的是实现中间部分的思路不同。

圣杯布局和双飞翼布局的相同点

属于三栏布局，左右固定，中间只适用
最新加载中间的DOM元素
父元素取三者间的最高值为高

圣杯布局

	    .box {
        height: 400px;
        padding: 0 300px;
    }
    .left,.right {
        width: 300px;
        height: 100%;
        float: left;
        background: pink;
    }
    .left {
        margin-left: -100%; //父元素宽度的100%
        position: relative;
        left: -300px;
    }
    .right {
        margin-left: -300px;
        position: relative; //相对于父元素定位
        right: -300px;
    }
    .center {
        width: 100%;
        background: skyblue;
        float: left;
    }
</style>
<body>
    <div class="box">
        <div class="center">中间</div>
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

圣杯布局是
1.给父元素左右两边留padding来存放左右元素
2.给中间元素宽度设置为100%
3.通过margin-left来放在一行上
4.通过position来实现定位。
效果图：
双飞翼布局

<style type="text/css">
		.box {
			height: 300px;
			/*padding: 0 300px;*/
		}
		.center,.left,.right {
			float: left;
			height: 100%;
		}
		.center {
			width: 100%;
			background: green;		}
		.left,.right {
			width: 300px;
			background: purple;
		}
		.left {
			margin-left: -100%;
		}
		.right {
			margin-left: -300px;
		}
		.main {
			margin: 0 300px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="center">
			<div class="main">中间</div>
		</div>
		<div class="left">左侧</div>
		<div class="right">右侧</div>
	</div>
</body>

效果图
双飞翼布局与圣杯布局的第2,3步一样，区别在与中间元素外层套了div，并且给它margin-left和margin-right来给左右两边留位置

flex布局实现三栏

<!DOCTYPE html>
<html>
<head>
	<title>flex布局</title>
</head>
<style type="text/css">
.box {
	display: flex;
	flex-direction: row;
}	
.left {
	width: 300px;
	height: 300px;
	background: red;
	order: -1; /*盒子的位置*/
}
.right {
	width: 300px;
	height: 300px;
	background: yellow;
}
.center {
	flex: 1;
	height: 300px;
	background: green;
}
</style>
<body>
	<div class="box">
		<div class="center">中间</div>
		<div class="left">左侧</div>
		<div class="right">右侧</div>
	</div>
</body>
</html>

玐也很可爱呀

关注

0
点赞
踩
1

收藏

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

圣杯布局和双飞翼布局都是属于三栏布局，左中右，左右固定宽度，中间自适应，不同的是实现中间部分的思路不同。圣杯布局和双飞翼布局的相同点属于三栏布局，左右固定，中间只适用最新加载中间的DOM元素父元素取三者间的最高值为高圣杯布局 .box { height: 400px; padding: 0 300px; } .left,.ri...
复制链接

扫一扫