使用ngFor时不要引入换行符

Question

我有以下内容：

<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;
}

这就是我所拥有的：

这就是我想要的：

Answer 1

最好是在包装元素上使用display: flex，而不是使用古老的float：

<强> HTML

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

<强> CSS

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

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

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

点击此处查看可爱的工作fiddle，不包括角度，因为这主要是css / html问题。

Answer 2

我认为这可以通过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>

快速提示：

要调整CSS样式，您可以检查Chrome或Firefox中的元素，并在浏览器面板中修改css规则，直到获得所需的输出。然后，您转到您的代码并复制相同的规则，看看它是如何进行的。

比一直修改代码和发送F5垃圾邮件更快。 ：d

更新1 - Flexbox解决方案：

container { 
  padding: .5vw;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
}

container div { 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
  height: 150px; 
  margin: .5vw; 
}

container div img { 
  height: 100%;
}

和html：

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