时间戳

首页 > 解决方案 > 星云翻转卡片 - 如何使卡片背面高度与卡片正面高度不同（角度）

css - 星云翻转卡片 - 如何使卡片背面高度与卡片正面高度不同（角度）

问题描述

星云卡片正反面与内容最多的那面高度相同（如果卡片正面有20行文字，卡片背面有10行，那么卡片背面会留出10行空白以保持它与卡片正面大小均匀）。如何自定义高度的大小，以便卡片背面和卡片正面有自己独特的预定高度？

<nb-flip-card [showToggleButton]="false" [flipped]="flipped">


  <nb-card-front>
    <nb-card>
      <nb-card-body>
        <app-home></app-home>
      </nb-card-body>
    </nb-card>
  </nb-card-front>


  <nb-card-back >
    <nb-card >
      <nb-card-body>
        <app-about></app-about>
      </nb-card-body>
    </nb-card>
  </nb-card-back>

</nb-flip-card>

标签： cssangularheightnebular

解决方案

如果您确定将在最大一侧的内容量（即它不是正在加载的动态内容），您可以使用<br>或margin样式来推动另一侧进行匹配。我也使用了 max-height ，但这并不总是可取的。

这是翻牌中令人讨厌的部分，Nebular 还没有解决方案。如果较小的一面将卡片下方的内容拉到它上面，那就太好了。

推荐阅读