html响应式的方形多列布局

最新推荐文章于 2023-02-19 16:18:22 发布

原创最新推荐文章于 2023-02-19 16:18:22 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #响应式 #布局 #box

web前端专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一种利用CSS实现响应式九宫格布局的方法。通过使用`::before`伪元素结合`padding-top`属性，可以确保每个单元格的长宽比保持一致。此方法适用于多种场景，包括1:1、1:2等比例布局。

先上图：

要达到的效果呢，差不多就是九宫格的布局。

上代码：

<html lang='en' ng-app="hcm">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<style>
	body,ul,li,div{
		padding:0;
		margin:0;
		outline:none;
	}
	body{
		height:100%;
		width:100%;
	}

	.container_ul>li{
		width:30%;
		float:left;
		border:1px solid grey;
		margin-left:2.5%;
		display: inline-block;
		position: relative;
		margin-top:2.5%;
		background:#eeeeee;
		box-sizing:border-box;
	}
	.container_ul>li::before{
		content: "";
		display:block;
		padding-top:100%;

	}
	.container_ul>li .container_content{
		position:absolute;
		left:0;
		top:0;
		width:100%;
	}

</style>


</head>

<body>
	<div>
		<ul class="container_ul">
			<li>
				<div class="container_content">
					container
				</div>
			</li>
			<li>
				<div class="container_content">
					container
				</div>
			</li>
			<li>
				<div class="container_content">
					container
				</div>
			</li>
			<li>
				<div class="container_content">
					container
				</div>
			</li>
			<li>
				<div class="container_content">
					container
				</div>
			</li>
			<li>
				<div class="container_content">
					container
				</div>
			</li>
			<li>
				<div class="container_content">
					container
				</div>
			</li>
		</ul>
	</div>

</body>

宽度呢，很好实现。width:30%;margin-left:2.5%;就好了。

关键是高度的问题，如何让高度和宽度相等呢？直接设置height是不行的。这里呢，我们就要用到::before 了。

关于before的用法呢,大家自己搜下。此处的关键呢在于在::before中的padding-top属性。

由于margin和padding如果是百分比的话，它是以它的父容器的宽度为基准的,所以padding-top:100%; 实际上呢padding-top的值就等于它的父元素也就是li的宽度。这样就达到了我们想要的效果。

但是li元素的内部呢，就得设置position:absolute;top:0了，否则位置就不对了。当然，做到了长宽比为1：1，也能做到1：2，1：3之类。