質問編集履歴
2
画像
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -375,3 +375,5 @@
|
|
|
375
375
|
|
|
376
376
|
|
|
377
377
|
codepenでの２分割とは、今ある現状のmessages部分を１列と考えるならば倍にして２列にし、横並びにしたいということです。
|
|
378
|
+
|
|
379
|
+
|
1
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
### overflowできるページの２分割
|
|
1
|
+
追記### overflowできるページの２分割
|
|
2
2
|
|
|
3
3
|
お手数おかけしますが、まず[こちら](https://codepen.io/aybukeceylan/pen/OJRNbZp)のコードペンのURLを確認していただきたいです。
|
|
4
4
|
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
<div class="message-box ">
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
|
|
30
30
|
|
|
31
31
|
<div class="message-content ">
|
|
32
32
|
|
|
@@ -34,20 +34,6 @@
|
|
|
34
34
|
|
|
35
35
|
<div class="name ">Stephanie</div>
|
|
36
36
|
|
|
37
|
-
<div class="star-checkbox ">
|
|
38
|
-
|
|
39
|
-
<input type="checkbox " id="star-1 ">
|
|
40
|
-
|
|
41
|
-
<label for="star-1 ">
|
|
42
|
-
|
|
43
|
-
<svg xmlns="http://www.w3.org/2000/svg " width="20 " height="20 " viewBox="0 0 24 24 " fill="none " stroke="currentColor " stroke-width="2 " stroke-linecap="round " stroke-linejoin="round " class="feather feather-star ">
|
|
44
|
-
|
|
45
|
-
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2 " /></svg>
|
|
46
|
-
|
|
47
|
-
</label>
|
|
48
|
-
|
|
49
|
-
</div>
|
|
50
|
-
|
|
51
37
|
</div>
|
|
52
38
|
|
|
53
39
|
<p class="message-line ">
|
|
@@ -328,8 +314,64 @@
|
|
|
328
314
|
|
|
329
315
|
```
|
|
330
316
|
|
|
317
|
+
|
|
318
|
+
|
|
319
|
+
### 追記
|
|
320
|
+
|
|
321
|
+
解決できると考えたコードに関してですが、文字数の問題もあり、サンプルコードを参考にしていただきたいです。
|
|
322
|
+
|
|
323
|
+
上述した通り（わかりにくくてすみません）
|
|
324
|
+
|
|
331
|
-
<div class="message-box">
|
|
325
|
+
<div class="message-box">の中に
|
|
326
|
+
|
|
332
|
-
|
|
327
|
+
<div class="projects-section-header">で囲まれた部分を入れ子にして２回分入れてます。
|
|
328
|
+
|
|
329
|
+
イメージとして下にサンプルコードを書きます。
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
|
|
333
|
+
```sample
|
|
334
|
+
|
|
335
|
+
<div class="wrapper">
|
|
336
|
+
|
|
333
|
-
<div class="
|
|
337
|
+
<div class="column cat1"> //ここが<div class="projects-section-header">以降の１回目に相当
|
|
338
|
+
|
|
334
|
-
|
|
339
|
+
<div class="info">
|
|
340
|
+
|
|
341
|
+
<h2>アラン</h2>
|
|
342
|
+
|
|
343
|
+
<p>(ローラン)</p>
|
|
344
|
+
|
|
345
|
+
<a href="#">プロフィール</a>
|
|
346
|
+
|
|
335
|
-
|
|
347
|
+
</div>
|
|
348
|
+
|
|
349
|
+
</div>
|
|
350
|
+
|
|
351
|
+
<div class="column cat2"> //ここが<div class="projects-section-header">以降の2回目に相当
|
|
352
|
+
|
|
353
|
+
<div class="info">
|
|
354
|
+
|
|
355
|
+
<h2>アステア</h2>
|
|
356
|
+
|
|
357
|
+
<p>(ラダトーム)</p>
|
|
358
|
+
|
|
359
|
+
<a href="#">プロフィール</a>
|
|
360
|
+
|
|
361
|
+
</div>
|
|
362
|
+
|
|
363
|
+
</div>
|
|
364
|
+
|
|
365
|
+
</div>
|
|
366
|
+
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
|
|
370
|
+
|
|
371
|
+
サンプルコードでは.wrapperにdisplay: flex;で**”横並び”**になるはずですよね？
|
|
372
|
+
|
|
373
|
+
私が２分割と言っているのは、Divを横並びにするということです。
|
|
374
|
+
|
|
375
|
+
|
|
376
|
+
|
|
377
|
+
codepenでの２分割とは、今ある現状のmessages部分を１列と考えるならば倍にして２列にし、横並びにしたいということです。
|