<p>タグの高さを合わせたい

Question

実現したいこと

下記のようなデザインで、金額の部分（「￥ 4,200（税込）」と「￥ 7,700（税込）」）の高さを下に合わせたいです。

発生している問題・分からないこと

金額の部分（「￥ 4,200（税込）」と「￥ 7,700（税込）」）の高さを下に合わせたいです。
それぞれにclass名を付ければ実装はできますが、そうではなく、商品タイトルの長さが３行になっても４行になっても金額の位置は下の方の位置になるようにするにはどのようなコードをかけばいいのでしょうか。

該当のソースコード

  <!-- Slider main container -->
  <div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <article class="swiper-slide">
        <figure><img src="img/strawberries.jpg" alt=""></figure>
        <div class="swiper-slide__text-box">
          <h4 class="swiper-slide__text-box-heading">「あいまりん」「サマープリンセス」「サマーリリカル」「よつぼし」など詰め合わせ10パック</h4>
        </div>
        <p class="swiper-slide__text-box-desc">￥ 4,800（税込）</p>
      </article>

      <article class="swiper-slide">
        <figure><img src="img/grapes.jpg" alt=""></figure>
        <div class="swiper-slide__text-box">
          <h4 class="swiper-slide__text-box-heading">蓼科ごとう農園オリジナル品種の「シャインマスカット」と「ナガノパープル」500g</h4>
        </div>
        <p class="swiper-slide__text-box-desc">￥ 7,700（税込）</p>
      </article>
      <article class="swiper-slide">
        <figure><img src="img/strawberries.jpg" alt=""></figure>
        <div class="swiper-slide__text-box">
          <h4 class="swiper-slide__text-box-heading">「あいまりん」「サマープリンセス」「サマーリリカル」「よつぼし」など詰め合わせ10パック</h4>
        </div>
        <p class="swiper-slide__text-box-desc">￥ 4,800（税込）</p>
      </article>

.swiper-wrapper {
  margin-top: 95px;
}

.swiper-slide {
  width: 264px!important;
  height: 331px!important;
  background: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
  color: #4E301B;

  figure {
    img {
      width: 264px!important;
      height: 166px!important;
      display: block;
      object-fit: cover;
    }
  }

  &__text-box-heading {
    padding: 16px;
  }

  &__text-box-desc {
    padding: 0 16px;
  }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

「高さを合わせたい　CSS」などで検索しましたが、ぴったりの言葉が見つからずこれといった回答が見つかりませんでした。

補足

特になし

Comments

[maisumakun]

> それぞれにclass名を付ければ実装はできますが、そうではなく

どういうことでしょうか？

[mitoka2525]

例えばぶどうの方に「swiper-slide__text-box-heading-grape」というclass名を追加し、margin-top:38px;、イチゴの方に「swiper-slide__text-box-heading-strawberry」というclass名を追加し、margin-top:14px;とすれば希望通りの見た目になります。
見やすいようにぶどうとイチゴの2つだけにしているのですが、実際には何種類ものフルーツを載せるので、この方法だと金額の上の商品タイトルが１行なのか4行なのか確認して手作業でmargin-topをいれなければなりません。金額は下の線から16pxの位置に固定する方法があるのかお伺いしたいです。

Answer 1

.swiper-slide を display: flex; flex-direction: column にして、

• .swiper-slide__text-box は flex: 1
• .swiper-slide figure と .swiper-slide__text-box-desc は flex: 0

にするとご希望どおりになると思います。

Answer 2

int32_tさんからヒントを得て、
.swiper-slideを親にしてposition: relative;、
.swiper-slide__text-box-descを子にしてposition: absolute;を設定し、
bottom: 16px;にしたら丁度の位置に出ました。
ありがとうございました。

Comments

[int32_t]

このケースで position:relative や position:absolute は使わないほうが良いです。
トラブルの元ですし、描画が遅くなりますし、メモリ使用量が増えます。

[mitoka2525]

そうなんですね。そういう知識、知りたかったやつです！ありがとうございます！
ただ教えていただいたflex: 1とかじゃ位置が変わりませんでした。
jsが絡んでいるのがおかしくなる原因でしょうか…
デベロッパーツールで確認すると.swiper-slideにいれたdisplay: flex; flex-direction: columnに打ち消し線が入っています。