回答編集履歴

1

コード追記

2020/05/09 14:30

投稿

hatena19
hatena19

スコア33856

test CHANGED
@@ -19,3 +19,53 @@
19
19
  HTMLの変更が可能なら、box1 と box2 以降を別のdivで囲めば可能です。
20
20
 
21
21
  HTMLの変更が不可なら、CSSだけではたぶん無理だと思います。JSが必要になるかな。
22
+
23
+
24
+
25
+ 追記
26
+
27
+ ---
28
+
29
+ もう少し考えてみたら、CSS Grid を使えばできそうです。
30
+
31
+ 下記の感じでどうでしょうか。
32
+
33
+
34
+
35
+ ```css
36
+
37
+ .container {
38
+
39
+ display: grid;
40
+
41
+ grid-template-columns: 50% 50%;
42
+
43
+ grid-template-rows: auto auto auto auto;
44
+
45
+ }
46
+
47
+ .box {
48
+
49
+ height: auto;
50
+
51
+ }
52
+
53
+ .box {
54
+
55
+ grid-column: 2;
56
+
57
+ }
58
+
59
+ .box:first-child {
60
+
61
+ grid-column: 1;
62
+
63
+ grid-row: 1/ 5;
64
+
65
+ }
66
+
67
+ ```
68
+
69
+
70
+
71
+ [Codepenサンプル](https://codepen.io/hatena19/pen/NWGMGeJ)