回答編集履歴

1

追記

2017/02/16 11:53

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -99,3 +99,109 @@
99
99
  </html>
100
100
 
101
101
  ```
102
+
103
+
104
+
105
+ ---
106
+
107
+ **(追記)**
108
+
109
+ ```HTML
110
+
111
+ <!DOCTYPE html>
112
+
113
+ <html lang="ja">
114
+
115
+ <head>
116
+
117
+ <meta charset="UTF-8">
118
+
119
+ <title>タイトル</title>
120
+
121
+ <style type="text/css">
122
+
123
+ body {
124
+
125
+ margin: 0;
126
+
127
+ padding: 0;
128
+
129
+ width: 100%;
130
+
131
+ }
132
+
133
+
134
+
135
+ img {
136
+
137
+ width: 100%;
138
+
139
+ }
140
+
141
+
142
+
143
+ .room_cards {
144
+
145
+ margin: -5px;
146
+
147
+ display: -webkit-flex; /* Safari */
148
+
149
+ display: flex;
150
+
151
+ -webkit-flex-wrap: wrap; /* Safari */
152
+
153
+ flex-wrap: wrap;
154
+
155
+ -webkit-align-items: stretch; /* Safari */
156
+
157
+ align-items: stretch;
158
+
159
+ justify-content: flex-start;
160
+
161
+ }
162
+
163
+
164
+
165
+ .card {
166
+
167
+ margin: 5px;
168
+
169
+ flex-basis: calc(25% - 10px);
170
+
171
+ }
172
+
173
+ </style>
174
+
175
+ </head>
176
+
177
+ <body>
178
+
179
+ <div class="room_cards">
180
+
181
+ <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
182
+
183
+ <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
184
+
185
+ <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
186
+
187
+ <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
188
+
189
+ <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
190
+
191
+ <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
192
+
193
+ <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
194
+
195
+ <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
196
+
197
+ <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
198
+
199
+ <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
200
+
201
+ </div>
202
+
203
+ </body>
204
+
205
+ </html>
206
+
207
+ ```