css使用padding-top实现宽高等比自适应效果

完整代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>宽高等比自适应</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0
			}
			
			ul,
			li {
				list-style: none;
			}
			/*body宽度随意变化看看效果*/
			
			body {
				width: 100%;
			}
			
			ul {
				background: #fff;
				overflow: hidden;
			}
			
			li {
				width: 32%;
				padding-top: 32%;
				float: left;
				margin-left: 1%;
				background: red;
				margin-bottom: 1%;
				position: relative;
			}
			
			li:after {
				position: absolute;
				content: '1';
				z-index: 99;
				left: 50%;
				top: 50%;
			}
			
			.test {
				padding-top: 50%;
				background: blue;
			}
		</style>
	</head>

	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<br />
		<div class="test"></div>
	</body>

</html>

发布者

cylyiou

cylyiou

分享前端知识

支付宝扫码打赏微信打赏

如果文章对您有帮助,不妨移至上方按钮小额赞助我一下,让我有动力继续写出高质量的教程。

发表评论

电子邮件地址不会被公开。