html - 在固定位置显示按钮

Question

我在我的 Angular html 表单中使用网格。网格如下:

 .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2%;
        grid-auto-rows: 90%;
    }

此网格将平行排列两个矩形。现在我有一些 div，它们将在这些矩形上显示数据，每个矩形底部都有一个按钮。但是当一个或另一个 div 没有要显示的数据时，我的按钮会向上移动网格。我希望这些按钮位于网格底部的固定位置，并且当按钮上方的 div 不显示数据时不要向上移动。我该怎么做。

Answer 1

要在没有数据显示时让按钮保持在底部，应将插入按钮的元素的display属性设置为flex，并将margin-top 按钮的 auto。

您还必须删除 .grid 类的 grid-auto-rows: 90%; 或至少将其设置为自动。这会导致您的网格无法随内容正常增长。

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows#Values

HTML:

<div class="grid">
  <div class="cell">
    <div>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
    <button class="button">My Button 1</button>
  </div>
  <div class="cell">
    <button class="button">My Button 2</button>
  </div>
</div>

CSS:

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2%;
  grid-auto-rows: auto;
}

.cell {
  display: flex;
  flex-direction: column;
}

.button {
  margin-top: auto;
  height: 40px;
  padding: 10px;
  width: 200px;
}

.cell 是插入按钮和内容的元素。请参阅此处的工作示例:https://codepen.io/bosoria/pen/MWgdVej