Ionic 3 卡片按钮不显示在卡片的右下方答案

【问题标题】：Ionic 3 cards button is not displayed on the bottom right of the cardIonic 3 卡片按钮不显示在卡片的右下方
【发布时间】：2019-10-04 10:39:15
【问题描述】：

我需要将按钮移动到价格的同一 div 中，但要位于卡片的末尾。这是我的卡片脚本：

<ion-card class="offersCard">
    <ion-card-header>
      <b>Name: Ali</b>
      <br />
      <b>DOB: 1994</b>
    </ion-card-header>
    <ion-card-content>
      <div>
        <div class="floatLeft imgStyle">
          <img src="" class="img-responsive">
        </div>
        <div class="floatRight">

          Required Task
          <br />
          Encrypt Data
        </div>
        <div>
          <!-- <h2>Price: {{data.selectedPrice}} $</h2> -->
          <button class="btnMargin" ion-button color="danger" (click)="buyPolicy(data.offer_id)">Take</button>
        </div>
      </div>
      <br/>
      <div>
        <div class="floatLeft">
          <h2>Price: 40 $</h2>
        </div>

      </div>
    </ion-card-content>
  </ion-card>

当前行为如下图所示：

所以我尝试将按钮的 div 移动到价格 div 的同一级别，并为其添加 floatRight 类，但它接近价格而不是卡的末尾：

价格：40 美元

拿

而且它甚至没有在同一级别居中：

然后我尝试将它们放在同一个 div 中，并将类声明移动到两个元素中：

<div>
  <h2 class="floatLeft">Price: 40 $</h2>

  <button class="btnMargin floatRight" ion-button color="danger" (click)="buyPolicy(data.offer_id)">Take</button>
</div>

结果是一样的。

这是一个关于它的stackblitz。

如何将按钮放置在卡片的右下角并与价格 div 居中？

【问题讨论】：

标签： css ionic-framework sass

【解决方案1】：

我建议从你的布局词汇中禁止float，除非你明确希望文本在框周围浮动。对于布局有 flexboxes 和 grids 浏览器的良好支持。

我从您的代码中删除了浮动 css 类和一个不必要的包装 div 元素，并添加了这样的 flex-box 元素样式：

<div style="display: flex; justify-content: space-between;  align-items: center;">
    <h2 >Price: 40 $</h2>
    <button class="btnMargin" ion-button color="danger"
            (click)="buyPolicy(data.offer_id)">Take</button>
</div>

这是你的updated stackblitz。

如果你想深入了解，有一个很棒的guide to flexbox at CSS-Tricks。

【讨论】：

谢谢。但是价格和按钮并没有对齐。价格在按钮的顶层。我需要与按钮中心的同一行
请阅读指南；）它是align-items: center;。我更新了 sn-p 和 stackblitz。

【解决方案2】：

你需要

justify-content: space-between; 对齐它们并

align-items: center; 将它们垂直居中

摆脱 flaot 在其他答案中提及

<div style="width: 100%;justify-content: space-between;align-items: center;">
  <h2>Price: 40 $</h2>
  <button ion-button color="danger" (click)="buyPolicy(data.offer_id)">Take</button>
</div>

演示https://stackblitz.com/edit/ionic-o4jme7?file=pages/home/home.html

这里是flex-cheatsheet你可以玩

【讨论】：