html - 网格中卡片的高度不是动态的

Question

如何根据其中的数据内容固定给定卡片的高度。

这是我的 HTML 代码：

<div  class="parentOfCards">
         <div  class="dataCard" *ngFor='let item of Weekly | async' style="height: auto;">
            <div style="border: 1px solid #707070; border-bottom: 0;">
               <div class="cardTitles" style="padding: 0 5%;">{{item.name}}</div>
              <br>
               <div class="cardTitles" style="padding: 0 5%; font-size: 1em;">{{item.time.toString().slice(0,21)}}</div>
              <br>
            </div>
            <div style="height: 50px; display: grid; grid-template-columns: 1fr 1fr;">
               <button style="border: 1px solid #707070; padding: 13px; background: none;"> Edit</button>
               <button style="border: 1px solid #707070; padding: 13px; border-left: 0; background: none;"> Delete</button>
            </div>
         </div>
      </div>

CSS 代码：

.parentOfCards {
  width: 1380px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.dataCard {
  height: auto;
  width: 350px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  margin: 10px auto;
}

这是我的代码的当前输出：在第一行中，前两张没有足够内容的卡片也与第三张卡片一样长。但是，在第二行中，所有卡片都具有相同长度的内容，因此看起来很完美。如何在第一行也达到动态高度？

标签： htmlcss

Answer 1

设置display: flex;和.dataCard设置flex: 1;卡片内容：

.parentOfCards {
  width: 1380px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.dataCard {
  height: auto;
  width: 350px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  margin: 10px auto;
  display: flex;
  flex-direction: column;
}

.dataCard-content {
  flex: 1;
  height: 100%;
  border: 1px solid #707070;
  border-bottom: 0;
}

<div class="parentOfCards">
  <div class="dataCard">
    <div class="dataCard-content">
      <div class="cardTitles" style="padding: 0 5%;">Name 1</div>
      <br>
      <div class="cardTitles" style="padding: 0 5%; font-size: 1em;">Time 1</div>
      <br>
    </div>
    <div style="height: 50px; display: grid; grid-template-columns: 1fr 1fr;">
      <button style="border: 1px solid #707070; padding: 13px; background: none;"> Edit</button>
      <button style="border: 1px solid #707070; padding: 13px; border-left: 0; background: none;"> Delete</button>
    </div>
  </div>
  <div class="dataCard">
    <div class="dataCard-content">
      <div class="cardTitles" style="padding: 0 5%;">Name 2</div>
      <br>
      <div class="cardTitles" style="padding: 0 5%; font-size: 1em;">Time 2</div>
      <br>
    </div>
    <div style="height: 50px; display: grid; grid-template-columns: 1fr 1fr;">
      <button style="border: 1px solid #707070; padding: 13px; background: none;"> Edit</button>
      <button style="border: 1px solid #707070; padding: 13px; border-left: 0; background: none;"> Delete</button>
    </div>
  </div>
  <div class="dataCard">
    <div class="dataCard-content">
      <div class="cardTitles" style="padding: 0 5%;">Name 3</div>
      <br>
      <div class="cardTitles" style="padding: 0 5%; font-size: 1em;">Time 3, with very long description that wraps to another line</div>
      <br>
    </div>
    <div style="height: 50px; display: grid; grid-template-columns: 1fr 1fr;">
      <button style="border: 1px solid #707070; padding: 13px; background: none;"> Edit</button>
      <button style="border: 1px solid #707070; padding: 13px; border-left: 0; background: none;"> Delete</button>
    </div>
  </div>
</div>