动态计算元素的宽度

Question

我有一组要显示的元素，我想创建所有宽度相同的图块，并使 div 宽度为 100%。（在此代码中，图块大小不同）。非常感谢任何帮助。

<div class="summaryArea" align="center">
    <div *ngFor="let item of getSummery()">
      <kendo-tilelayout [rowHeight]="200" [resizable]="true">
        <kendo-tilelayout-item>
          <kendo-tilelayout-item-body align="center">
            <div class="summary" align="center">
              <h4>{{item.amount}}</h4>
              <div *ngIf="item.status == 'up'"><span class="k-icon k-i-arrow-60-up k-icon-md" style="color:green"></span></div>
              <div *ngIf="item.status == 'down'"><span class="k-icon k-i-arrow-60-down k-icon-md" style="color:red"></span></div>
            </div>
            <br />
            <div>{{item.name}}</div>
            <hr />
            <div>{{item.Description}} </div>
          </kendo-tilelayout-item-body>
        </kendo-tilelayout-item>
      </kendo-tilelayout>
    </div>
  </div>

这是我的CSS

.summary {
  display:inline-flex;
}    
.summaryArea {
  width:fit-content;
  font-size:medium;
  display: flex;
}

我这样试过，但行不通

<kendo-tilelayout-item [width] ="calculatewidth(getSummery().length)">

Ts文件

  public calculatewidth(length) {
    return 100 / length+'%';
  }

Answer 1

如果.summaryArea区的width改成width : 100%呢？结果是你想要的吗？

Answer 2

尝试每个使用 25%，因为它是 4 盒

Answer 3

我用下面的代码做到了。感谢大家的努力

<div class="summaryArea">
          <div *ngFor="let item of getSummery()" [style.width]="calculatewidth(getSummery().length)">
            <kendo-tilelayout [rowHeight]="170">
              <kendo-tilelayout-item>
                <kendo-tilelayout-item-body align="center">

                  //content

                </kendo-tilelayout-item-body>
              </kendo-tilelayout-item>
            </kendo-tilelayout>
        </div>
      </div>

Css

.summaryArea {
  width:100%;
  font-size:medium;
  display: flex;
}

ts

  public calculatewidth(length) {
    return 100 / length + '%';
    }

动态计算元素的宽度

Calculate dynamically width of elements

html

css

alignment

kendo-ui

angular