横並びのカードでテキストの高さを合わせたい

Question

画像のように.card_timeを下で揃えたいです。
レスポンシブに対応したいのでheightは指定していません。
最初は

.card{
  position: relative;
}
.card_time {
  position:absolute;
　bottom:10px;
}

を指定していましたが、テキストの量が増えたり、ブラウザ幅が変わるとテキストに埋もれてしまいました。

<div class="container">
        <div class="card">
          <figure class="card__img">
            <img src="img/office.jpg" alt="office">
          </figure><!-- /.card__img -->
            <div class="card_body">
              <p class="card__txt">
                テキストテキストテキストテキストテキスト
              </p><!-- /.card__txt -->
            </div>
            <p class="card__time">
              2020.01.23
            </p><!-- /.card__time -->
        </div><!-- /.card -->
        <div class="card">
          <figure class="card__img">
            <img src="img/office.jpg" alt="office">
          </figure><!-- /.card__img -->
            <div class="card_body">
              <p class="card__txt">
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p><!-- /.card__txt -->
            </div>
            <p class="card__time">
              2020.01.23
            </p><!-- /.card__time -->
        </div><!-- /.card -->
        <div class="card">
          <figure class="card__img">
            <img src="img/office.jpg" alt="office">
          </figure><!-- /.card__img -->
            <div class="card_body">
              <p class="card__txt">
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p><!-- /.card__txt -->
            </div>
            <p class="card__time">
              2020.01.23
            </p><!-- /.card__time -->
        </div><!-- /.card -->

      </div><!-- /.blog_container -->

.container {
  display: flex;
  margin-top: 55px;
  max-width: 1227px;
  margin-right: auto;
  margin-left: auto;

}

.card {
  background-color: #fff;
  box-shadow: 0 3px 6px 0px rgba(54, 54, 54, 0.16);
  width: 33.3333%;
  margin-right: 30px;
  position: relative;

  &:nth-of-type(3) {
    margin-right: 0;
  }
  &__img {
    margin: 0;
    overflow: hidden;
    position: relative;
    padding-top: 66%;
    img {
      position: absolute;
      top: 50%;
      height: auto;
      width: 100%;
      transform: translateY(-50%);
    }
  }
  &_body {
    padding: 16px 30px;
  }
  &__txt {
    font-size: 1.8rem;
    line-height: 1.4;
    @include mq('tab') {
      padding-right: 16px;
      padding-bottom: 35px;
      width: 100%;
    }
  }
  &__time {
    padding: 10px 30px;
    text-align: right;
  }
}

Answer 1

FlexBoxで縦並びにして、.card_timeをmargin-top: auto; で下揃え。

.card {
  background-color: #fff;
  box-shadow: 0 3px 6px 0px rgba(54, 54, 54, 0.16);
  display: flex;           //追加
  flex-direction: column;  //追加
  width: 33.3333%;
  margin-right: 30px;
  position: relative;

  &:nth-of-type(3) {
    margin-right: 0;
  }
  &__img {
    margin: 0;
    overflow: hidden;
    position: relative;
    padding-top: 66%;
    img {
      position: absolute;
      top: 50%;
      height: auto;
      width: 100%;
      transform: translateY(-50%);
    }
  }
  &_body {
    padding: 16px 30px;
  }
  &__txt {
    font-size: 1.8rem;
    line-height: 1.4;
     @include mq('tab') {
      padding-right: 16px;
      padding-bottom: 35px;
      width: 100%;
    }
  }
  &__time {
    padding: 10px 30px;
    text-align: right;
    margin-top: auto;   //追加
  }
}

position:absolute; を使うなら、

.card{
  position: relative;
  padding-bottom: 30px; /* ここで.card_timeの高さ分の余白をとる */
}
.card_time {
  position:absolute;
　bottom:10px;
}

Comments

[7777tata]

できました！
ありがとうございました。