css - NG-ZORRO nz卡体内对准

Question

与nz-card的使用有关在 ng-zorro .

我试图在卡片正文中对齐样式化的操作按钮，但没有成功。

我希望卡片的高度相同，因此从视觉上看，所有卡片的底部边框都是垂直对齐的。该按钮位于每张卡片的底部。

示例如下: https://stackblitz.com/edit/angular-py7awb

希望使用可用作最佳实践的通用标准方法。

Answer 1

这会将按钮直接放置到底部，“1rem”将相对于父 div(在本例中为“nz-card”)从底部到顶部增加一个距离

 <div nz-col nzXs="8">
    <nz-card nzTitle="Where does it come from?" style="height: 100%">
      <div style="margin-bottom:2rem">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
      </div>
      <div nz-row nzType="flex" nzJustify="space-between" style="position:absolute; bottom:1rem">
          <button nz-button nzType="primary" nzAlign="bottom"  >Ask more</button>
      </div>
    </nz-card>
  </div>

对于“询问更多”按钮，您需要移除周围的“div”，因为它将位于第一个父 div 的底部，而不是“nz-card”底部

唯一的问题是，如果文本太多，它会与按钮重叠，这就是为什么我在文本周围添加了一个 div，边距为 2 rem，以便为按钮留出空间

<div style="margin-bottom:2rem">
            <p>Lorem Ipsum is simply </p>
</div>