Div在AngFor 6中的ngFor指令中自动向右推

Question

<div class="row">
  <div class="col-lg-4 col-xs-6" *ngFor="let client of clients;index as i">
    <!-- small box -->
    <div class="small-box bg-dashboard-box" >
      <div class="inner">
        <div class="text-black">
          <h4>{{client.clientName}}</h4>
          <p>{{client.address}}, {{client.city}}, {{client.state}}, {{client.country}}-{{client.pinCode}}</p> 
        </div> 
      </div>
      <a (click)="onClientClick(client)" class="small-box-footer">
        Users<i class="fa fa-arrow-circle-right"></i>
      </a>
    </div>

这是生成的图像。 div高度不均匀，这就是为什么div已被正确推入的原因。我希望它应该在同一行。我已经尝试过css clear: both;没有帮助。我尝试通过计算mod在第三个创建的div之后添加缓冲区div。 <div *ngIf="i%3 == 0" style="position: absolute;column-span:inherit; height: 10px; border: solid; bottom: 0; right: 0; left: 0; ">但问题在于它在循环中。因此它无法跨越此缓冲区div的所有列。

Answer 1

这里有一个相当简单的修复程序。

您的div的高度不同，因为有时此文本会自动换行：

<p>{{client.address}}, {{client.city}}, {{client.state}}, {{client.country}}-{{client.pinCode}}</p>

因此，只需在此段落中添加一个类：

<p class="clientinfo">{{client.address}}, {{client.city}}, {{client.state}}, {{client.country}}-{{client.pinCode}}</p>

然后添加一个高度：

.clientinfo {
  height: 60px;
}

这将确保您所有的div高度相同，并且完全避免了该问题。

或者，只需使用省略号溢出：

.clientinfo {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

还可以在段落上使用title HTML属性，以便在用省略号将其截断时，用户可以将鼠标悬停在文本上以查看完整的信息。