vue实现左右各三张图片并列
时间: 2023-06-16 16:06:40 浏览: 291
可以使用flex布局实现左右各三张图片并列的效果。
HTML代码:
```html
<div class="container">
<div class="left-images">
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
<div class="right-images">
<img src="image4.png">
<img src="image5.png">
<img src="image6.png">
</div>
</div>
```
CSS代码:
```css
.container {
display: flex;
justify-content: space-between;
}
.left-images img,
.right-images img {
width: 30%;
}
```
通过将容器设置为flex布局,并将其子元素左右对齐(使用justify-content: space-between;),可以将左右两组图片并排显示。同时,通过设置图片的宽度为30%,可以保证每一行最多显示3张图片。
阅读全文