我有一個正常、簡單的 flexbox 布局。我嘗試每行顯示兩個元素。有足夠的寬度容納 2 個元素。但奇怪的是，每個元素都有一整行。我不知道為什么。這是我的代碼：
畫廊.html：
<div class="container" *ngFor="let imageOrFile of imagesAndFiles">
<div class="image">
<dispo-einsatz-dokumente-gallery-image-item
[image]="imageOrFile"
></dispo-einsatz-dokumente-gallery-image-item>
</div>
</div>
畫廊.scss：
.container {
display: flex;
flex-direction: row;
}
.image {
width: 40%;
height: 200px;
}
和子組件html：
<p>{{ image.name }}</p>
這是結果：
為什么會這樣？如何將我的兩個元素放在一行中？
uj5u.com熱心網友回復：
改變你的gallery.html：
<div class="container">
<div class="image" *ngFor="let imageOrFile of imagesAndFiles">
<dispo-einsatz-dokumente-gallery-image-item [image]="imageOrFile">
</dispo-einsatz-dokumente-gallery-image-item>
</div>
</div>
*ngFor 使用“容器”類重復 N 次 div 并且您有 N 行
uj5u.com熱心網友回復：
將 for 回圈移動到 div.image 元素，容器類元素被多次渲染，您希望使用多個影像類元素渲染一次容器類元素
<div class="container">
<div class="image" *ngFor="let imageOrFile of imagesAndFiles">
<dispo-einsatz-dokumente-gallery-image-item
[image]="imageOrFile"
></dispo-einsatz-dokumente-gallery-image-item>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530762.html