时间戳

首页 > 解决方案 > NG-ZORRO nz-card 体内校准

css - NG-ZORRO nz-card 体内校准

问题描述

这与ng-zorro中nz-card的使用有关。

我试图在卡体内对齐样式操作按钮但没有成功。

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

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

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

示例中的当前屏幕截图

我试图达到的目标

标签： cssangularng-zorro-antd

解决方案

这会将按钮直接放在底部，“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>

推荐阅读