Кнопка Ionic 3 cards не отображается в правом нижнем углу карты

Question

Мне нужно переместить кнопку в то же самое деление цены, но чтобы быть в конце карты. Вот мой скрипт карты:

<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>

И результат был тот же.

Вот стек-блиц об этом.

Как разместить кнопку в правом нижнем углу карты и отцентрировать ее по центру цены?

Answer 1

Вам нужно

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 , с которым вы можете играть

Answer 2

Я бы рекомендовал запретить 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>

Вот ваш обновленный стек .

Существует превосходное руководство для flexbox на CSS-Tricks , если вы хотите покопаться в.