【CSS】カードの中身の位置を揃えたい

Question

一部不具合を含んだコードや誤った記述があったため、質問を削除しました。再度調べ直して投稿します。

Comments

[hatena19]

現状のHTMLとCSSのコードを質問に追記してください。

[MH00214]

HTML,CSS追記しました！

Answer 1

.news-category を position: absolute; で底辺を基準として配置すればいいでしょう。

/* 前略 */

.news-content-card {
  background: $WHITE;
  border-radius: 12px;
  max-width: 330px;
  margin: 0 32px 32px 0;
  box-shadow: 0px 4px 24px rgba($RICH_BLACK, 0.15);
  transition: all 0.2s;
  display: block;
  position: relative; /* 追加 */

/* 中略 */

.news-category {
  font-weight: bold;
  font-size: 16px;
  line-height: 16px;
  color: $SPANISH_GRAY;
  position: absolute;  /* 追加 */
  bottom: 3px;  /* 追加 数値は調整してください */
}

Comments

[MH00214]

ありがとうございます！
位置は揃えられるようになりました。
タイトルが2行、3行、1行のようになった時に下のcategoryとの距離感がそれぞれずれてしまうので、そこの部分はデザイナーさんと相談して進めてみます。