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>