如何并排显示包含在角度 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>

Answer 2

试试这个

您可以根据设计要求玩样式

.item {
width: 100%
}
.container {
display: flex;
flex-wrap: wrap;
}
.container>div {
flex: 0 50%;
/*demo*/
border: red solid;
box-sizing:border-box
}

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<!--your code-->
<div class="container">
<div class="item" *ngFor="let url of urls">
<img [src]="url" alt="Image not found" height="250px" width="350px" (click)="imageClick(url)"></div>
</div>