Question

我有一个带有Materialise CSS的Angular 4应用程序。网页使用卡片，高度不同，所以我使用的是flexbox，但是直到3才最大化。

当卡片长度相同时，没有问题：最小化时，彼此相邻的3张牌，它变为2，最终为1。

但是当卡片的高度不同时，我会有3张卡然后是1张卡，然后是3张卡，这不是我想要的。

我该如何解决这个问题。

HTML-CODE

 <div class="row ">
    <ng-template  ngFor let-flow [ngForOf]="data">
    <div *ngIf="flow.id !== currFlow.id" class="col s12 m6 l4">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">

          <p>
            <strong><b>{{flow.name}}</b></strong>
          </p>

          <form style="overflow: auto; margin-top: 10px;">
            <div class="input-field" style="float:left; width: 50%">
              <input id="type" type="text" value="{{flow.type}}" readonly>
              <label class="active" for="type">Type</label>
            </div>
            <div class="input-field" style="float: right; width: 50%">
              <input id="update" type="text" value="{{flow.updated_at}}" readonly>
              <label class="active" for="update">Last Update</label>
            </div>
            <div class="input-field" style="float:left; width: 50%">
              <input id="obs-start" type="text" value="{{flow.observation_start}}" readonly>
              <label class="active" for="obs-start">Start Observation</label>
            </div>
            <div class="input-field" style="float: right; width: 50%">
              <input id="obs-end" type="text" value="{{flow.observation_end}}" readonly>
              <label class="active" for="obs-end">End Observation</label>
            </div>
          </form>
        </div>
      </div>
    </div>
      </ng-template>
  </div>

CSS

.input-field label {
  color: white
}
input {
  border-bottom-color: transparent;
  font-size: 2rem;
  margin: 0;
}

PICTURE

修改

我现在这样做：

 <div class="row d-flex" *ngFor="let item of specialData">
    <div *ngFor="let flow of item" class="col s12 m6 l4 d-flex">


.d-flex {
  display: inline-flex;
}

因此对于每个第3个元素一行并显示inline-flex。如果它没有3个元素，它可以工作，但不适用于最后一行。

1个元素/卡 - ＆gt;卡是浮动的：右边，而不是左边...... 2元素/卡片 - ＆gt;一张卡浮动：右边，另一张放在它上面的2张第一张牌的中间，而不是两张卡在彼此旁边

Answer 1

我认为问题在于您将所有卡片元素放在一行中。尝试根据ngFor提供的索引将它们分成多个行元素，比如说每三张卡片。

物化CSS卡等于高度，行最多3

1 个答案: