2列のカードの中にあるリンクの縦位置を、隣のカードと揃えたい。

前提・実現したいこと

2列に並べたカードがあります。

各カードの中の一番下の要素にリンクがあります。
このリンクの縦位置が隣と揃っていないので、隣同士でリンクの縦位置が低い方に合わせて配置することで、リンクの位置を隣と揃えたいです。

テキスト量は可変です。

発生している問題・エラーメッセージ

画像の

該当のソースコード

html
1  <head>
2    <link
3      rel="stylesheet"
4      href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
5    />
6    <link rel="stylesheet" href="style.css" />
7  </head>
8  <body>
9    <ul class="cards">
10      <li>
11        <div class="img"></div>
12        <p>
13          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
14        </p>
15        <a href="#" class="link">
16          リンク
17        </a>
18      </li>
19      <li>
20        <div class="img"></div>
21        <p>
22          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
23        </p>
24        <a href="#" class="link">
25          リンク
26        </a>
27      </li>
28      <li>
29        <div class="img"></div>
30        <p>
31          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
32        </p>
33        <a href="#" class="link">
34          リンク
35        </a>
36      </li>
37      <li>
38        <div class="img"></div>
39        <p>
40          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
41        </p>
42        <a href="#" class="link">
43          リンク
44        </a>
45      </li>
46    </ul>
47  </body>

css
1.cards {
2  padding: 1rem;
3  display: flex;
4  flex-wrap: wrap;
5}
6
7.cards li {
8  padding: 0.5rem;
9  border: 1px solid black;
10  width: calc(50% - 0.5rem);
11  margin-bottom: 1rem;
12}
13
14.cards li:nth-of-type(odd) {
15  margin-right: 1rem;
16}
17
18.cards p {
19  margin: 0.5rem 0 1rem;
20  line-height: 1.2;
21}
22
23.img {
24  background: gray;
25  width: calc(50% - 0.5rem);
26  height: 8rem;
27  float: left;
28  margin: 0 0.5rem 0.5rem 0;
29}
30
31.link {
32  background: black;
33  color: white;
34  display: block;
35  padding: 1rem;
36  font-weight: bold;
37  font-size: 1.2rem;
38  text-align: center;
39}

試したこと

liタグにflexを設定し、リンクにmargin-top: auto;を設定することで、リンクの位置を揃えることができました。
しかし、.imgに対するテキストの回り込みがなくなりました。
テキストの回り込みは維持したいです。

行動規範の内容に同意します

回答1件

ベストアンサー

画像と回り込みテキストをラップして、li要素をフレックスにして縦方向に配置するのはどうでしょうか。

html
1    <li>
2      <div class="wrapper">
3        <div class="img"></div>
4        <p>
5          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
6        </p>
7      </div>
8      <a href="#" class="link">
9        リンク
10      </a>
11    </li>

css
1li {
2  display: flex;
3  flex-direction: column;
4  justify-content: space-between;
5}

投稿2021/12/28 08:46

Lhankor_Mhy

総合スコア36163

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！