floatされたアイテムが含まれているコンテンツの内、特定のコンテンツの水平位置を揃えたい

前提・実現したいこと

CodeSandBox
カード型のリストを縦横2列で並べています。

カード内のコンテンツは下記の順です。

画像
引用文
ボタン
リンク

また、画像はfloat: leftを設定し、画像に対し引用文を回り込ませています。
引用文、ボタン、リンクのテキスト量は可変です。

画像に引用文を回り込ませつつ、ボタンとリンクの縦並びの要素を一まとまりと考え、その一まとまりをカード最下部に配置したいです。
ただし、できるだけ余計なDOMを増やしたくないため、ボタンとリンクはwrapしたくないです。

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

引用文の量が可変のため、例えば左のカードの引用文が多く右のカードの引用文が少ない場合は、隣のカードと比較した際、ボタンとリンクの位置が揃いません。

該当のソースコード

html
1    <ul>
2      <li>
3        <figure>
4          <img
5            src="https://images.unsplash.com/photo-1597920940566-a77511f9327d?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
6          />
7        </figure>
8        <blockquote>
9          <p>
10            テキストテキストテキストテキストテキストテキストテキストテキストテキスト
11          </p>
12        </blockquote>
13        <div>
14          <button>テキスト</button>
15        </div>
16        <div>
17          <a>★★★★</a>
18          <a>〇〇〇〇</a>
19        </div>
20      </li>
21      <li>
22        <figure>
23          <img
24            src="https://images.unsplash.com/photo-1597920940566-a77511f9327d?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
25          />
26        </figure>
27        <blockquote>
28          <p>
29            テキストテキストテキストテキストテキストテキストテキストテキストテキスト
30            <br />
31            テキストテキストテキストテキストテキストテキストテキストテキストテキスト
32          </p>
33        </blockquote>
34        <div>
35          <button>テキスト</button>
36        </div>
37        <div>
38          <a>★★★★★★</a>
39          <a>〇〇〇</a>
40        </div>
41      </li>
42      <li>
43        <figure>
44          <img
45            src="https://images.unsplash.com/photo-1597920940566-a77511f9327d?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
46          />
47        </figure>
48        <blockquote>
49          <p>
50            テキストテキストテキストテキストテキステキスト
51            <br />
52            テキストテキストテキストテキストテキストテキストテキストテキストテキスト
53            <br />
54            テキストテキストテキストテキストテキストテキストテキスト
55          </p>
56        </blockquote>
57        <div>
58          <button>テキスト</button>
59        </div>
60        <div>
61          <a>★</a>
62          <a>〇〇〇〇〇〇〇〇〇〇〇〇</a>
63        </div>
64      </li>
65      <li>
66        <figure>
67          <img
68            src="https://images.unsplash.com/photo-1597920940566-a77511f9327d?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
69          />
70        </figure>
71        <blockquote>
72          <p>
73            テキストテキストテキストテキストテキストテキストテキストテキストテキスト
74          </p>
75        </blockquote>
76        <div>
77          <button>テキスト</button>
78        </div>
79        <div>
80          <a>★★★★★★★★</a>
81          <a>〇〇</a>
82        </div>
83      </li>
84    </ul>

css
1
2* {
3  box-sizing: border-box;
4}
5
6body,
7figure,
8blockquote,
9p {
10  margin: 0;
11}
12
13ul {
14  padding: 1rem;
15  list-style: none;
16  display: flex;
17  flex-wrap: wrap;
18  max-width: 700px;
19  margin: 0 auto;
20}
21
22li {
23  width: 50%;
24  padding: 1rem;
25  box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.5);
26}
27
28li figure {
29  width: 5rem;
30  height: 5rem;
31  float: left;
32  margin: 0 0.5rem 0.5rem 0;
33}
34
35li img {
36  display: block;
37  width: 100%;
38  height: 100%;
39  object-fit: cover;
40}
41
42li blockquote {
43  margin-bottom: 0.5rem;
44}
45
46li div {
47  clear: both;
48  display: flex;
49  align-items: center;
50}
51
52li div button {
53  margin-bottom: 0.5rem;
54  display: flex;
55  align-items: center;
56}
57
58li div *::before {
59  content: "";
60  background: no-repeat center;
61  background-size: contain;
62  display: block;
63  width: 1rem;
64  height: 1rem;
65  margin-right: 0.2rem;
66}
67
68li div button::before {
69  background-image: url("https://images.unsplash.com/photo-1611262588024-d12430b98920?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aWNvbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60");
70}
71
72li div a::before {
73  background-image: url("https://images.unsplash.com/photo-1614680376408-81e91ffe3db7?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aWNvbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60");
74}
75
76li div a {
77  display: flex;
78  align-items: center;
79}
80
81li div button,
82li div a:nth-of-type(1) {
83  margin-left: auto;
84}
85
86li div a:nth-of-type(2) {
87  margin-left: 0.5rem;
88}

試したこと

liにflexとblockquoteにmargin-bottom: autoを設定することで、ボタンとリンクの位置をカードの最下部に設置でき、それらの位置を隣のカードと揃えることができました。
↓
CodeSandBox2

しかし、liにflexを適用したことで、figureのfloatが効かなくなりました。

また、liのflexをやめてblockquoteにhight: 100%を設定したところ、ボタンとリンクがカードがからはみ出しました。
CodeSandBox3

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

回答2件

ベストアンサー

ただし、できるだけ余計なDOMを増やしたくないため、ボタンとリンクはwrapしたくないです。

余計かどうかの判断基準が何か不明ですが、
画像の横にテキストを回り込ませたいということは、２つは一つの塊という意味になると思いますので、1つのブロック内に入れるのが自然かと思いました。

下記のようにblockquote内にfigureを入れればどうでしょう。

html
1  <li>
2    <blockquote>
3      <figure>
4        <img src="">
5      </figure>
6      <p>
7        テキストテキストテキストテキストテキストテキストテキストテキストテキスト
8      </p>
9    </blockquote>
10    <div>
11      <button>テキスト</button>
12    </div>
13    <div>
14      <a>★★★★</a>
15      <a>〇〇〇〇</a>
16    </div>
17  </li>

そうすれば、

liにflexとblockquoteにmargin-bottom: autoを設定することで、

で、希望のレイアウトになります。

css
1li {
2  width: 50%;
3  padding: 1rem;
4  box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.5);
5  display: flex;
6  flex-direction: column;
7}
8
9li blockquote {
10  margin-bottom: auto;
11}