双飞翼布局和圣杯布局的写法

最新推荐文章于 2023-05-08 10:10:46 发布

clqxmt

最新推荐文章于 2023-05-08 10:10:46 发布

阅读量279

点赞数

分类专栏： CSS 文章标签：双飞翼布局和圣杯布局的写法

本文链接：https://blog.csdn.net/weixin_43755513/article/details/97806336

版权

CSS 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

双飞翼布局和圣杯布局

1.第一种写法：
必须按照 left、right、center的顺序写，如果是按照left、center、right的顺序right不能浮动到右边

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding:0;}
			.left{width:200px; height:300px; background:#f00; float:left;}
			
			.right{width:200px; height:300px; background:#0ff; float:right;}
			.center{height:500px;background:#ff0; overflow:hidden;}
		</style>
		
	</head>
	<body>
		<div class="left"></div>
		
		<div class="right"></div>
		<div class="center"></div>
	</body>
</html>

2.第二种写法：使用定位给左右两个div设置定位，中间的div设置overflow:hidden;以及设置左右margin值为左右两边div的宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding:0;}
			.left{width:200px; height:300px; background:#f00; position:absolute;left:0;top:0;}
			.center{height:500px;background:#ff0; overflow:hidden; margin-left:200px; margin-right:200px;}
			.right{width:200px; height:300px; background:#0ff; float:right; position:absolute;right:0; top:0;}
			
		</style>
	</head>
	<body>
		<div class="left"></div>
		<div class="center"></div>
		<div class="right"></div>
		
	</body>
</html>

还有N中写法

clqxmt

关注

0
点赞
踩
0

收藏

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

双飞翼布局和圣杯布局1.第一种写法：必须按照 left、right、center的顺序写，如果是按照left、center、right的顺序right不能浮动到右边<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> &lt...
复制链接

扫一扫