css-九宫格自适应的实现

最新推荐文章于 2024-06-25 12:55:31 发布

weixin_30651273

最新推荐文章于 2024-06-25 12:55:31 发布

阅读量400

点赞数

原文链接：http://www.cnblogs.com/xiongmanli/p/6065714.html

版权

高度自适应使用padding 或 padding-bottom + 百分比来实现；

宽度自适应使用width + 百分比来实现。

下面是实现九宫格自适应的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css01-九宫格</title>
	<style>
		* { padding: 0; margin: 0; }
		.main {
			
			background-color: #fff;
			width: 90%;
			padding-bottom: 90%;
			
		}
		/* .clearfix:after{
			visibility: hidden;
			display: inline-block;
			content: "";
			height: 0;
			clear: both;
			*zoom: 1;
			
		} */
		.main>div {
			width: 26%;
			padding-bottom: 26%;
			border: 1% solid #fff; 			
			background-color: #E78326;
			border-radius: 3%; 
			float: left;
			margin: 1%;
		}
	</style>
</head>
<body>
	<div class="main clearfix">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>
		<div class="box6"></div>
		<div class="box7"></div>
		<div class="box8"></div>
		<div class="box9"></div>
	</div>
</body>
</html>

转载于:https://www.cnblogs.com/xiongmanli/p/6065714.html

weixin_30651273

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-九宫格自适应的实现

高度自适应使用padding 或 padding-bottom + 百分比来实现；宽度自适应使用width + 百分比来实现。下面是实现九宫格自适应的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css01-九宫...
复制链接

扫一扫