html - 如何并排显示包含在 Angular 为 8 的数组中的图像(例如，连续 2 个图像，然后是下一行)？

Question

下面是我编写并尝试过的 HTML 代码:

<div class="row">
    <div *ngFor="let url of urls" class="col-md-6">
        <img [src]="url" alt="Image not found" height="250px" width="350px" (click)="imageClick(url)">
    </div>
</div>

注意:urls 是包含图片 url 数组的数组!

Answer 1

可以尝试使用flexbox

.img-container {
display:flex;
 flex-wrap: wrap;
align-content: space-evenly;
}
.img-container img{
width:50%;
}

<div class="row">
    <div *ngFor="let url of urls" class="col-md-6 img-container”>
        <img [src]="url" alt="Image not found" height="250px" width="350px" (click)="imageClick(url)">
    </div>
</div>