css - Ionic 3 卡片按钮未显示在卡片的右下方

Question

我需要将按钮移到价格的同一个 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关于它。

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

Answer 1

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

我从您的代码中删除了 float 的 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如果你想深入研究。