HTML图片5联布局示例代码
时间: 2023-07-28 08:46:04 浏览: 44
以下是一个使用 HTML 图片 5 联布局的示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<style>
.image-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
}
.image {
width: 100%;
height: auto;
}
.caption {
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<div class="image-grid">
<div class="image">
<img src="image1.jpg" alt="Image 1">
<div class="caption">Image 1</div>
</div>
<div class="image">
<img src="image2.jpg" alt="Image 2">
<div class="caption">Image 2</div>
</div>
<div class="image">
<img src="image3.jpg" alt="Image 3">
<div class="caption">Image 3</div>
</div>
<div class="image">
<img src="image4.jpg" alt="Image 4">
<div class="caption">Image 4</div>
</div>
<div class="image">
<img src="image5.jpg" alt="Image 5">
<div class="caption">Image 5</div>
</div>
</div>
</body>
</html>
```
在这个示例中,我们使用了 `display: grid` 属性来创建一个包含 5 个图片的网格布局。通过 `grid-template-columns: repeat(5, 1fr)` 属性,我们将网格分为 5 列,每列的宽度为 1fr,即平均分配剩余空间。同时,通过 `grid-gap: 10px` 属性设置网格中图片之间的间距为 10px。
每个图片都被包裹在一个 `div` 元素中,其中包含了一个 `img` 元素和一个 `div` 元素,后者用于显示图片的标题。我们使用了 `width: 100%; height: auto;` 属性来确保图片的宽度可以完全填满其容器,并保持高宽比。最后,我们使用了 `text-align: center; font-size: 14px;` 属性来居中图片标题并设置字体大小。