要素が3つある場合、要素の２つ目で改行したい

前提・実現したいこと

画像とテキストを含んだリストの中で、画像が2つの場合は2つ目の画像で改行したいです。
テキストはpかul liのいずれかが入ります。
下記はサンプルです。
サンプル

サンプルではflexを使っていますが、実現したいことが実現できればflexでなくてもいいです。
ただし、水平位置において要素は等間隔に配置したいです。

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

要素が3つの場合、2つ目の要素で改行できていません。

該当のソースコード

html
1  <body>
2    <ul>
3      <li class="box">
4        <figure>
5          <div></div>
6          <figcaption>いえいえい</figcaption>
7        </figure>
8        <p>
9          あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと
10        </p>
11      </li>
12      <li class="box">
13        <figure>
14          <div></div>
15          <figcaption>いえいえい</figcaption>
16        </figure>
17        <ul>
18          <li>あいうえおかきくけこさしすせそたちつてと</li>
19          <li>あいうえおかきくけこさしすせそたちつてと</li>
20          <li>あいうえおかきくけこさしすせそたちつてと</li>
21          <li>あいうえおかきくけこさしすせそたちつてと</li>
22          <li>あいうえおかきくけこさしすせそたちつてと</li>
23          <li>あいうえおかきくけこさしすせそたちつてと</li>
24        </ul>
25      </li>
26      <li class="box">
27        <figure>
28          <div></div>
29          <figcaption>いえいえい</figcaption>
30        </figure>
31        <figure>
32          <div></div>
33          <figcaption>いえいえい</figcaption>
34        </figure>
35        <p>
36          あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと
37        </p>
38      </li>
39    </ul>
40  </body>

css
1* {
2  box-sizing: border-box;
3}
4
5body {
6  margin: 0;
7  word-break: break-all;
8  word-wrap: break-word;
9}
10
11p {
12  margin: 0;
13}
14
15ul {
16  list-style: none;
17  padding: 0;
18  margin: 0;
19}
20
21li {
22  border: 2px solid black;
23  padding: 1em;
24  width: 480px;
25  margin: 0 auto;
26  margin-bottom: 1em;
27}
28
29li ul {
30  list-style: disc;
31  padding-left: 1em;
32}
33
34li li {
35  border: none;
36  padding: 0;
37  margin: 0;
38  width: 100%;
39}
40
41figure {
42  margin: 0;
43  margin-bottom: 0.5em;
44  text-align: center;
45}
46
47figure div {
48  width: 220px;
49  height: 220px;
50  background-color: black;
51}
52
53.box {
54  display: flex;
55  justify-content: space-between;
56}
57
58.box figure:nth-of-type(1) + * {
59  margin-left: 1em;
60}
61
62.box figure:nth-of-type(2) + * {
63  width: 100%;
64}
65

試したこと

改行をされたい要素にwidth: 100%を指定することで改行できる、という主旨をteratailどれかの質問の回答で見つけたので指定してみましたが、改行できませんでした。

追記

CMSで画像や文章を設定するため、HTML構造は変更せずCSSだけで実現したいことを実現したいです。

実現したいレイアウト

画像が1枚の場合

画像の横にテキストを配置
→ 現状、サンプルのコードで実現はできています。

画像が2枚の場合

画像が2枚横並びで、画像群の下にテキスト
テーブルレイアウトで言うと、
・1行目:1列目画像、2列目画像
・2行目:1列目から2列目にわたってテキスト

m.ts10806

2020/12/06 00:14

＞という主旨をteratailどれかの質問の回答で見つけたので要件に沿っているか確かめる必要があるので、質問URLを提示してください。

erajera

2020/12/06 00:35

コメントありがとうございます。 > どれかの質問の回答で見つけた質問文に記載しました上記の文章の通り、その質問がどれだったか記憶しておりませんので、恐れ入りますがその質問URLの提示ができません。

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

回答1件

ベストアンサー

下記でどうでしょうか。

css
1* {
2  box-sizing: border-box;
3}
4
5body {
6  margin: 0;
7  word-break: break-all;
8  word-wrap: break-word;
9}
10
11p {
12  margin: 0;
13}
14
15ul {
16  list-style: none;
17  padding: 0;
18  margin: 0;
19}
20
21li {
22  border: 2px solid black;
23  padding: 1em;
24  width: 480px;
25  margin: 0 auto;
26  margin-bottom: 1em;
27}
28
29li ul {
30  list-style: disc;
31  padding-left: 1em;
32}
33
34li li {
35  border: none;
36  padding: 0;
37  margin: 0;
38  width: 100%;
39}
40
41figure {
42  margin: 0;
43  margin-bottom: 0.5em;
44  text-align: center;
45}
46
47figure div {
48  width: 220px;
49  height: 220px;
50  background-color: black;
51}
52
53.box {
54  display: flex;
55  justify-content: space-between;
56  flex-wrap: wrap;
57  gap: 1em;
58}
59.box > figure {
60  width: 48%;
61  flex: 0 0 48%;
62}
63
64.box figure {
65  flex: 0 0 45%;
66}
67
68.box > p, .box > ul {
69  flex: 1 0 45%;
70}

投稿2020/12/06 00:32

編集2020/12/06 01:50

hatena19

総合スコア34073

erajera

2020/12/06 00:52

ご回答いただきありがとうございます。質問文に記載していなかったため申し訳ないのですが、CMSで画像や文章を追加するため、HTML構造を変更せずCSSだけで実現したいです。質問文にその旨を追加します。また、画像が2つの場合は画像2つが横並びで、2つの画像の下にテキストが並ぶレイアウトを希望しています。テーブルレイアウトで言うと1行目2列にわたって画像2つ、2行目2列にわたってテキスト、という感じです。画像が1つの場合は1行目1列目画像、2列目にテキスト、です。