teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

質問後直したコードを載せましたが、再度、質問前のコードに訂正しました。

2018/11/14 06:17

投稿

退会済みユーザー
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

何とかボックスに入れました。よろしくお願いします。

2018/11/14 06:17

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -9,16 +9,14 @@
9
9
 
10
10
  どうかよろしくお願いします。
11
11
 
12
- ```html
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 clearfix">
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
- ```CSS
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
- clear:both;
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
+ ```