离子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。对于布局，有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非常好。

Answer 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，可以和

一起玩