質問編集履歴
2
質問後直したコードを載せましたが、再度、質問前のコードに訂正しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<meta charset="utf-8">
|
|
17
17
|
<link rel="stylesheet" href="main.css">
|
|
18
18
|
</head>
|
|
19
|
-
<div class="wrapper">
|
|
19
|
+
<div class="wrapper clearfix">
|
|
20
20
|
<div class="container-1">
|
|
21
21
|
<div class="red"></div>
|
|
22
22
|
<div class="yellow"></div>
|
|
@@ -36,6 +36,12 @@
|
|
|
36
36
|
```css
|
|
37
37
|
@charset "ute-8";
|
|
38
38
|
|
|
39
|
+
.clearfix::after {
|
|
40
|
+
display: block;
|
|
41
|
+
content: "";
|
|
42
|
+
clear: both;
|
|
43
|
+
}
|
|
44
|
+
|
|
39
45
|
.wrapper {
|
|
40
46
|
width: 600px;
|
|
41
47
|
height: 600px;
|
|
@@ -57,6 +63,7 @@
|
|
|
57
63
|
width: 200px;
|
|
58
64
|
height: 100px;
|
|
59
65
|
background-color: yellow;
|
|
66
|
+
clear: both;
|
|
60
67
|
}
|
|
61
68
|
.container-2 {
|
|
62
69
|
width: 200px;
|
|
@@ -77,7 +84,8 @@
|
|
|
77
84
|
width: 200px;
|
|
78
85
|
box-sizing: border-box;
|
|
79
86
|
float: left;
|
|
80
|
-
|
|
87
|
+
clear: both;
|
|
88
|
+
|
|
81
89
|
}
|
|
82
90
|
.black {
|
|
83
91
|
width: 200px;
|
1
何とかボックスに入れました。よろしくお願いします。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -9,16 +9,14 @@
|
|
|
9
9
|
|
|
10
10
|
どうかよろしくお願いします。
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
```HTML
|
|
13
|
-
コード
|
|
14
|
-
```
|
|
15
13
|
<!doctype html>
|
|
16
14
|
<html lang="ja">
|
|
17
15
|
<head>
|
|
18
16
|
<meta charset="utf-8">
|
|
19
17
|
<link rel="stylesheet" href="main.css">
|
|
20
18
|
</head>
|
|
21
|
-
<div class="wrapper
|
|
19
|
+
<div class="wrapper">
|
|
22
20
|
<div class="container-1">
|
|
23
21
|
<div class="red"></div>
|
|
24
22
|
<div class="yellow"></div>
|
|
@@ -33,31 +31,22 @@
|
|
|
33
31
|
</div>
|
|
34
32
|
</div>
|
|
35
33
|
|
|
36
|
-
</html>
|
|
34
|
+
</html>コード
|
|
37
|
-
|
|
38
|
-
```ＣＳＳ
|
|
39
|
-
コード
|
|
40
35
|
```
|
|
36
|
+
```css
|
|
41
37
|
@charset "ute-8";
|
|
42
|
-
.clearfix::after {
|
|
43
|
-
display: block;
|
|
44
|
-
content: "";
|
|
45
|
-
clear:both;
|
|
46
|
-
}
|
|
47
38
|
|
|
48
39
|
.wrapper {
|
|
49
40
|
width: 600px;
|
|
50
41
|
height: 600px;
|
|
51
42
|
box-sizing: border-box;
|
|
52
|
-
|
|
53
|
-
|
|
43
|
+
|
|
54
44
|
}
|
|
55
45
|
.container-1 {
|
|
56
46
|
width: 200px;
|
|
57
47
|
box-sizing: border-box;
|
|
58
48
|
float: left;
|
|
59
|
-
|
|
49
|
+
|
|
60
|
-
|
|
61
50
|
}
|
|
62
51
|
.red {
|
|
63
52
|
width: 200px;
|
|
@@ -72,8 +61,6 @@
|
|
|
72
61
|
.container-2 {
|
|
73
62
|
width: 200px;
|
|
74
63
|
box-sizing: border-box;
|
|
75
|
-
|
|
76
|
-
|
|
77
64
|
float: left;
|
|
78
65
|
}
|
|
79
66
|
.blue {
|
|
@@ -89,10 +76,7 @@
|
|
|
89
76
|
.container-3 {
|
|
90
77
|
width: 200px;
|
|
91
78
|
box-sizing: border-box;
|
|
92
|
-
|
|
93
|
-
|
|
94
79
|
float: left;
|
|
95
|
-
clear: both;
|
|
96
80
|
|
|
97
81
|
}
|
|
98
82
|
.black {
|
|
@@ -104,4 +88,6 @@
|
|
|
104
88
|
width: 200px;
|
|
105
89
|
height: 300px;
|
|
106
90
|
background-color: pink;
|
|
107
|
-
}
|
|
91
|
+
}
|
|
92
|
+
<\css>コード
|
|
93
|
+
```
|