質問編集履歴

2

誤字の修正

2021/09/19 16:57

投稿

bibibin07
bibibin07

スコア7

test CHANGED
File without changes
test CHANGED
@@ -96,6 +96,30 @@
96
96
 
97
97
  </div>
98
98
 
99
+ <div class="img">
100
+
101
+ <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/10/th_shutterstock_756071179.jpg"> </div>
102
+
103
+ <div class="text"> The World<br>
104
+
105
+ Festival Duide
106
+
107
+ - <br>海外の音楽フェス完<br>
108
+
109
+ 全ガイド -</div>
110
+
111
+
112
+
113
+
114
+
115
+ <div class="img">
116
+
117
+ <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/09/sekaiisan_tabibitonokoe2.jpg"> </div>
118
+
119
+ <div class="text">この世界で死ぬまで<br>
120
+
121
+ にしたいこと2000</div>
122
+
99
123
 
100
124
 
101
125
  ```

1

文章の改善

2021/09/19 16:57

投稿

bibibin07
bibibin07

スコア7

test CHANGED
File without changes
test CHANGED
@@ -4,10 +4,120 @@
4
4
 
5
5
 
6
6
 
7
- 画像初めのdiv要素だけにdisplay: flexをかけたものです。この作業を6回繰り返すか迷っていたのですが、空白の間隔や、画像の位置が一定であったため、一気に指定できる方法があるのではないかと思いここで質問させていただきました。
7
+ 理想
8
8
 
9
- 画像を左に、文字を右になるように横並びにし、それを6つ一括に操作する方法を教えていただけると嬉しいです。
10
9
 
11
- 回答よろしくお願いいたします。
12
10
 
11
+ img text
12
+
13
+
14
+
15
+ img text
16
+
17
+
18
+
19
+ img text
20
+
21
+
22
+
23
+ のような形で画像と文字を横に並ばせることです。ですがdisplay: flexを使うと画像のような並びになってしまいます。
24
+
25
+ それを改善しようとしてflex-direction: column; を使ったら横並びしなくなって頭を抱えています。
26
+
27
+ 6つ一括にimg text のような形
28
+
29
+ img text
30
+
31
+ img text
32
+
33
+ img text
34
+
35
+ img text
36
+
37
+ img text
38
+
39
+ img text
40
+
41
+ にするにはどうすれば良いですか。回答よろしくお願いいたします。
42
+
43
+
44
+
13
- ![イメージ説明](d0688850c0b9f1080a73730fc2635448.png)
45
+ ![イメージ説明](334239bcbf7a1b88cfc49317a7fb36be.png)
46
+
47
+
48
+
49
+ ```HTML
50
+
51
+ <div class="wrap">
52
+
53
+ <div class="img">
54
+
55
+ <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/09/paspol_closing-2.jpg"> </div>
56
+
57
+ <div class="text">地球一周 365日
58
+
59
+ 世<br>界遺産絶景の旅</div>
60
+
61
+
62
+
63
+
64
+
65
+ <div class="img">
66
+
67
+ <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/07/summer_postcard-2.jpg"> </div>
68
+
69
+ <div class="text"> 365日 京都 絶景の<br>旅</div>
70
+
71
+
72
+
73
+
74
+
75
+ <div class="img">
76
+
77
+ <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/05/springphoto.jpg"></div>
78
+
79
+ <div class="text">365日 北海道 絶景<br>
80
+
81
+ 日めくりカレンダー</div>
82
+
83
+
84
+
85
+
86
+
87
+ <div class="img">
88
+
89
+ <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/12/2020-12-10-16.59.15.jpg"></div>
90
+
91
+ <div class="text">365日 北海道
92
+
93
+ 絶景<br>の旅</div>
94
+
95
+
96
+
97
+ </div>
98
+
99
+
100
+
101
+ ```
102
+
103
+
104
+
105
+ ```css
106
+
107
+ .wrap {
108
+
109
+ display: flex;
110
+
111
+ flex: wrap;
112
+
113
+ }
114
+
115
+
116
+
117
+ .img img {
118
+
119
+ width: 320px;
120
+
121
+
122
+
123
+ ```