Css 当使用NGF时，用于don'；不要引入换行符

我的建议如下：

<div class="image-holder" *ngFor="let image of datasource">
    <img src="{{image.url}}" height="150" />
</div>

这就是我所拥有的：

这就是我想要的：

---

我认为这可以通过CSS解决：

.image-holder
{
    display: flex;
    justify-content: space-between;
}

.image-holder img {
    height: 150px;
    float: left;
}

您可以保留相同的html，但删除

img

中的height属性：

<div class="image-holder" *ngFor="let image of datasource">
    <img src="{{image.url}}" />
</div>

以及html：

<container>
    <div *ngFor="let image of datasource">
         <img src="{{image.url}}" />
    </div>
<container>

---

最好在包装器元素上使用

display:flex

，而不要使用古老的

float

：

html

<div class="images-wrapper">
    <div class="image-holder" *ngFor="let image of datasource">
        <img [src]="image.url">
    </div>
</div>

---

检查这里的一个可爱的工作，没有角度包括在内，因为这主要是一个css/html问题

您是否尝试过

float:left？改用
span
。@echonax是的，我试过了。但没有改变output@Vishal对不起，
浮动：左需要添加到img元素中
@DanielCooke是的，那有效，那无效。我的意思是输出是一样的。请看@DanielCooke的评论，它很有效。@Vishal我用完整的Flexbox解决方案更新了我的答案。希望它适合你或对你有任何帮助。祝你好运！是的，它工作得很好，但我也希望图像应该对齐，以便图像之间的间距应该自动调整。我在
包装器中添加了
justify content:space-between
，效果很好。非常感谢你的回答
<container>
    <div *ngFor="let image of datasource">
         <img src="{{image.url}}" />
    </div>
<container>

<div class="images-wrapper">
    <div class="image-holder" *ngFor="let image of datasource">
        <img [src]="image.url">
    </div>
</div>

.images-wrapper {
   display: flex;
   flex-wrap: wrap;
}

.image-holder {
   padding: 2px; /*for white border around images*/
   height: 120px;
}

.image-holder img {
   height: 100%;
}