基于html的走廊照片墙代码
时间: 2023-10-16 22:11:00 浏览: 32
以下是基于 HTML 的走廊照片墙代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>照片墙</title>
<style>
/* 设置图片大小和边框 */
img {
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
/* 设置图片间距 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
<img src="img4.jpg">
<img src="img5.jpg">
<img src="img6.jpg">
<img src="img7.jpg">
<img src="img8.jpg">
</div>
</body>
</html>
```
在这个示例中,我们使用了 `flex` 布局来设置图片的排列方式。我们使用了 `display: flex;` 来创建一个弹性容器,然后使用 `justify-content: center;` 来使图片居中对齐。我们还使用了 `gap` 属性来设置图片之间的间距。