HTML 多个正方体平铺对齐,给出代码示例
时间: 2023-07-10 07:08:18 浏览: 67
以下是一个简单的 HTML 代码示例,可以使用 CSS Grid 实现多个正方体的平铺对齐:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
}
.box {
background-color: #ccc;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
```
这个例子中,我们使用了 CSS Grid 来创建一个包含多个正方体的容器。`grid-template-columns` 属性设置了网格的列数和宽度,`grid-gap` 属性设置了网格之间的间距。`.box` 类定义了每个正方体的样式。
通过使用 `repeat(auto-fit, minmax(100px, 1fr))`,我们可以让容器自动适应不同的屏幕大小,并且每个正方体都会自动缩放到最小宽度为 100px,最大宽度为可用空间的 1fr。这样就可以实现多个正方体的平铺对齐。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)