在vue中如何将四张图片排成一排
时间: 2024-03-21 12:43:10 浏览: 25
你可以使用flex布局或者grid布局来实现将四张图片排成一排的效果。以下是两种实现方式:
1. 使用flex布局
在父元素上设置display: flex和justify-content: space-between属性,然后将四张图片作为子元素添加到父元素中,每个子元素设置flex: 1属性,即可实现四张图片平均分配排列在一行中。
示例代码:
```
<div class="img-container">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>
<style>
.img-container {
display: flex;
justify-content: space-between;
}
.img-container img {
flex: 1;
}
</style>
```
2. 使用grid布局
将四张图片作为子元素添加到一个父元素中,然后在父元素上设置display: grid和grid-template-columns: repeat(4, 1fr)属性,即可实现四张图片平均分配排列在一行中。
示例代码:
```
<div class="img-container">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>
<style>
.img-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
</style>
```