teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップHTMLに関する質問要素が3つある場合、要素の２つ目で改行したい

編集履歴

回答編集履歴

1

質問修正を受けて回答修正

2020/12/06 01:50

投稿

hatena19
hatena19

スコア34073

test CHANGED
@@ -1,146 +1,146 @@
1
- > 画像とテキストを含んだリストの中で、画像が2つの場合は2つ目の画像で改行したいです。
2
-
3
-
4
-
5
- いいかえると、
6
-
7
- 画像が複数の場合は、縦に並べて、そのよこにテキストを配置したいということでしょうか。
8
-
9
-
10
-
11
- 画像要素(figure)をdivブロックで囲めばいいでしょう。
12
-
13
-
14
-
15
- ```html
16
-
17
- <body>
1
+ 下記でどうでしょうか。
18
-
19
- <ul>
20
-
21
- <li class="box">
22
-
23
- <div class="imgs-box">
24
-
25
- <figure>
26
-
27
- <div></div>
28
-
29
- <figcaption>いえいえい</figcaption>
30
-
31
- </figure>
32
-
33
- </div>
34
-
35
- <p>
36
-
37
- あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと
38
-
39
- </p>
40
-
41
- </li>
42
-
43
- <li class="box">
44
-
45
- <div class="imgs-box">
46
-
47
- <figure>
48
-
49
- <div></div>
50
-
51
- <figcaption>いえいえい</figcaption>
52
-
53
- </figure>
54
-
55
- </div>
56
-
57
- <ul>
58
-
59
- <li>あいうえおかきくけこさしすせそたちつてと</li>
60
-
61
- <li>あいうえおかきくけこさしすせそたちつてと</li>
62
-
63
- <li>あいうえおかきくけこさしすせそたちつてと</li>
64
-
65
- <li>あいうえおかきくけこさしすせそたちつてと</li>
66
-
67
- <li>あいうえおかきくけこさしすせそたちつてと</li>
68
-
69
- <li>あいうえおかきくけこさしすせそたちつてと</li>
70
-
71
- </ul>
72
-
73
- </li>
74
-
75
- <li class="box">
76
-
77
- <div class="imgs-box">
78
-
79
- <figure>
80
-
81
- <div></div>
82
-
83
- <figcaption>いえいえい</figcaption>
84
-
85
- </figure>
86
-
87
- <figure>
88
-
89
- <div></div>
90
-
91
- <figcaption>いえいえい</figcaption>
92
-
93
- </figure>
94
-
95
- </div>
96
-
97
- <p>
98
-
99
- あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと
100
-
101
- </p>
102
-
103
- </li>
104
-
105
- </ul>
106
-
107
- </body>
108
-
109
- ```
110
2
 
111
3
 
112
4
 
113
5
  ```css
114
6
 
115
- /* 略 */
7
+ * {
116
8
 
117
-
118
-
119
- /* 以下削除
120
-
121
- .box figure:nth-of-type(1) + * {
9
+ box-sizing: border-box;
122
-
123
- margin-left: 1em;
124
10
 
125
11
  }
126
12
 
127
13
 
128
14
 
15
+ body {
16
+
17
+ margin: 0;
18
+
19
+ word-break: break-all;
20
+
21
+ word-wrap: break-word;
22
+
23
+ }
24
+
25
+
26
+
27
+ p {
28
+
29
+ margin: 0;
30
+
31
+ }
32
+
33
+
34
+
35
+ ul {
36
+
37
+ list-style: none;
38
+
39
+ padding: 0;
40
+
41
+ margin: 0;
42
+
43
+ }
44
+
45
+
46
+
47
+ li {
48
+
129
- .box figure:nth-of-type(2) + * {
49
+ border: 2px solid black;
50
+
51
+ padding: 1em;
52
+
53
+ width: 480px;
54
+
55
+ margin: 0 auto;
56
+
57
+ margin-bottom: 1em;
58
+
59
+ }
60
+
61
+
62
+
63
+ li ul {
64
+
65
+ list-style: disc;
66
+
67
+ padding-left: 1em;
68
+
69
+ }
70
+
71
+
72
+
73
+ li li {
74
+
75
+ border: none;
76
+
77
+ padding: 0;
78
+
79
+ margin: 0;
130
80
 
131
81
  width: 100%;
132
82
 
133
83
  }
134
84
 
85
+
86
+
87
+ figure {
88
+
135
- */
89
+ margin: 0;
90
+
91
+ margin-bottom: 0.5em;
92
+
93
+ text-align: center;
94
+
95
+ }
136
96
 
137
97
 
138
98
 
139
- /* 追加 */
99
+ figure div {
140
100
 
141
- .imgs-box {
101
+ width: 220px;
142
102
 
103
+ height: 220px;
104
+
143
- margin-right: 1em;
105
+ background-color: black;
106
+
107
+ }
108
+
109
+
110
+
111
+ .box {
112
+
113
+ display: flex;
114
+
115
+ justify-content: space-between;
116
+
117
+ flex-wrap: wrap;
118
+
119
+ gap: 1em;
120
+
121
+ }
122
+
123
+ .box > figure {
124
+
125
+ width: 48%;
126
+
127
+ flex: 0 0 48%;
128
+
129
+ }
130
+
131
+
132
+
133
+ .box figure {
134
+
135
+ flex: 0 0 45%;
136
+
137
+ }
138
+
139
+
140
+
141
+ .box > p, .box > ul {
142
+
143
+ flex: 1 0 45%;
144
144
 
145
145
  }
146
146