多个图片并列且每个图片下面对应文字
时间: 2023-10-09 12:17:42 浏览: 48
要实现多个图片并列且每个图片下面对应文字,可以使用HTML的table标签或者Flexbox布局。
使用table标签的示例代码如下:
```
<table>
<tr>
<td>
<img src="image1.jpg">
<p>图片1说明文字</p>
</td>
<td>
<img src="image2.jpg">
<p>图片2说明文字</p>
</td>
<td>
<img src="image3.jpg">
<p>图片3说明文字</p>
</td>
</tr>
<tr>
<td>
<img src="image4.jpg">
<p>图片4说明文字</p>
</td>
<td>
<img src="image5.jpg">
<p>图片5说明文字</p>
</td>
<td>
<img src="image6.jpg">
<p>图片6说明文字</p>
</td>
</tr>
</table>
```
使用Flexbox布局的示例代码如下:
```
<div class="image-container">
<div class="image">
<img src="image1.jpg">
<p>图片1说明文字</p>
</div>
<div class="image">
<img src="image2.jpg">
<p>图片2说明文字</p>
</div>
<div class="image">
<img src="image3.jpg">
<p>图片3说明文字</p>
</div>
<div class="image">
<img src="image4.jpg">
<p>图片4说明文字</p>
</div>
<div class="image">
<img src="image5.jpg">
<p>图片5说明文字</p>
</div>
<div class="image">
<img src="image6.jpg">
<p>图片6说明文字</p>
</div>
</div>
<style>
.image-container {
display: flex;
flex-wrap: wrap;
}
.image {
flex-basis: 33.33%;
padding: 10px;
box-sizing: border-box;
text-align: center;
}
.image img {
max-width: 100%;
height: auto;
}
</style>
```
这两种方法都可以实现多个图片并列且每个图片下面对应文字的效果,具体使用哪种方法可以根据具体情况进行选择。