回答編集履歴

2

コードを修正し、CSSも掲載しました

2018/04/26 04:58

投稿

Atsushi_Okumura
Atsushi_Okumura

スコア355

test CHANGED
@@ -2,28 +2,90 @@
2
2
 
3
3
  ```HTML
4
4
 
5
- <div class="float">
5
+ <div class="wrap">
6
6
 
7
- <div class="height1"></div>
7
+ <div class="float">
8
8
 
9
- <div class="height1"></div>
9
+ <div class="height1">1</div>
10
10
 
11
- <div class="float">
11
+ <div class="height1">1</div>
12
12
 
13
- <div>
13
+ </div>
14
14
 
15
- <div class="height1"></div>
15
+ <div class="float">
16
16
 
17
- <div class="height1"></div>
17
+ <div class="height1">1</div>
18
18
 
19
- <div class="float">
19
+ <div class="height1">1</div>
20
20
 
21
- <div>
21
+ </div>
22
22
 
23
- <div class="height2"></div>
23
+ <div class="float">
24
24
 
25
+ <div class="height2">2</div>
26
+
25
- <div class="height1"></div>
27
+ <div class="height1">1</div>
28
+
29
+ </div>
26
30
 
27
31
  </div>
28
32
 
29
33
  ```
34
+
35
+ ```CSS
36
+
37
+
38
+
39
+ div {
40
+
41
+ border: 1px solid #ccc;
42
+
43
+ }
44
+
45
+ .wrap::after {
46
+
47
+ content:'';
48
+
49
+ display:block;
50
+
51
+ clear:both;
52
+
53
+ }
54
+
55
+ .float {
56
+
57
+ float: left;
58
+
59
+ width: 30%;
60
+
61
+ }
62
+
63
+ .height1 {
64
+
65
+ width: 98%;
66
+
67
+ margin: 1%;
68
+
69
+ height: 100px;
70
+
71
+ }
72
+
73
+ .height2 {
74
+
75
+ width:98%;
76
+
77
+ margin: 1%;
78
+
79
+ height: 200px;
80
+
81
+ }
82
+
83
+ ```
84
+
85
+
86
+
87
+ タグにミスもありましたので修正しました。
88
+
89
+ codepenで見る↓
90
+
91
+ [https://codepen.io/RaRukAnA/pen/NMRPJR](https://codepen.io/RaRukAnA/pen/NMRPJR)

1

修正

2018/04/26 04:58

投稿

Atsushi_Okumura
Atsushi_Okumura

スコア355

test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  <div>
14
14
 
15
- <div class="height2"></div>
15
+ <div class="height1"></div>
16
16
 
17
17
  <div class="height1"></div>
18
18
 
@@ -20,7 +20,7 @@
20
20
 
21
21
  <div>
22
22
 
23
- <div class="height1"></div>
23
+ <div class="height2"></div>
24
24
 
25
25
  <div class="height1"></div>
26
26