CSS（十四）——变宽度布局

最新推荐文章于 2021-05-30 20:11:02 发布

程序员的时光

最新推荐文章于 2021-05-30 20:11:02 发布

阅读量465

点赞数

分类专栏： ● Web前端基础篇 Web前端基础文章标签：变宽度布局 CSS页面布局

本文链接：https://blog.csdn.net/qq_37084904/article/details/88697347

版权

Web前端基础同时被 2 个专栏收录

14 篇文章 11 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

● Web前端基础篇

33 篇文章 3 订阅

订阅专栏

本文介绍如何使用CSS中的百分比单位创建响应式的变宽度布局，使得页面能够根据浏览器窗口尺寸自动调整大小。

摘要由CSDN通过智能技术生成

利用相对于浏览器的百分比来设置页面布局大小：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body{
		text-align: center;
	}
	
	#head,#container,#content,#side,#foot{
		margin:20px auto 20px auto;
		padding:20px 0px 20px 0px;
		border: 1px solid red;
	}
	
	#head,#container,#foot{
		/* 相对于浏览器的百分比大小 */
		width: 80%;
	}
	
	#container{
		border:0px;
	}
	
	#content{
		float:left;
		width: 63%;
		height: 200px;
	}
	
	#side{
		float:right;
		width: 33%;
		margin-left: 10px;
		height: 100px;
	}
	
	#foot{
		clear: both;
	}
</style>
</head>
<body>
<div id="head">head</div>
<div id="co

了解本专栏