質問編集履歴

3

codeブロックの形式に変更

2017/05/22 08:46

投稿

Petapeta
Petapeta

スコア8

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,9 @@
24
24
 
25
25
  ###該当のソースコード
26
26
 
27
+ ```
28
+
27
- <html>
29
+ ``<html>
28
30
 
29
31
  <head>
30
32
 
@@ -32,29 +34,29 @@
32
34
 
33
35
  .container{
34
36
 
35
- background-color:#696969;
37
+ background-color:#696969;
36
38
 
37
- overflow:hidden;
39
+ overflow:hidden;
38
40
 
39
41
  }
40
42
 
41
43
  .sideber{
42
44
 
43
- background-color:#3cb371;
45
+ background-color:#3cb371;
44
46
 
45
- width:300px;
47
+ width:300px;
46
48
 
47
- float:left;
49
+ float:left;
48
50
 
49
51
  }
50
52
 
51
53
  .contents{
52
54
 
53
- background-color:#dcdcdc;
55
+ background-color:#dcdcdc;
54
56
 
55
- width:300px;
57
+ width:300px;
56
58
 
57
- float:right;
59
+ froat:right;
58
60
 
59
61
  }
60
62
 
@@ -64,43 +66,29 @@
64
66
 
65
67
  <body>
66
68
 
67
-
68
-
69
-
70
-
71
69
  <div class="container">
72
-
73
-
74
70
 
75
71
  <div class="sideber">
76
72
 
77
-
78
-
79
73
  テキスト
80
-
81
-
82
74
 
83
75
  </div>
84
76
 
85
-
86
-
87
77
  <div class="contents">
88
-
89
-
90
78
 
91
79
  フロート
92
80
 
93
-
94
-
95
81
  </div>
96
-
97
-
98
82
 
99
83
  </div>
100
84
 
101
85
  </body>
102
86
 
103
87
  </html>
88
+
89
+
90
+
91
+ ```
104
92
 
105
93
  ###試したこと
106
94
 

2

2017/05/22 08:45

投稿

Petapeta
Petapeta

スコア8

test CHANGED
File without changes
test CHANGED
@@ -109,3 +109,9 @@
109
109
 
110
110
 
111
111
  ###補足情報(言語/FW/ツール等のバージョンなど)
112
+
113
+ ご回答をいただいたソースで実際に動きましたが、Container を二重にして、中にwidthをつけるだけで上手く隠れるのは何故なのかがよくわからず、どのような発想に基づいているのかが知りたいです。
114
+
115
+ また、overflow :hiddenはなぜ2つ付けるのでしょうか。
116
+
117
+ 今後のために考え方などを教えていただけるとありがたいです。

1

2017/05/16 13:03

投稿

Petapeta
Petapeta

スコア8

test CHANGED
File without changes
test CHANGED
@@ -18,9 +18,89 @@
18
18
 
19
19
 
20
20
 
21
+ ソースコードを、簡易なもので作ってみました。現段階ですと、ウィンドウを縮めると、ie6ではボックスが上下にずれてしまいますが、それをウィンドウに隠れて見えなくし、形が崩れないようにしたいです。
22
+
23
+
24
+
21
25
  ###該当のソースコード
22
26
 
27
+ <html>
23
28
 
29
+ <head>
30
+
31
+ <style>
32
+
33
+ .container{
34
+
35
+ background-color:#696969;
36
+
37
+ overflow:hidden;
38
+
39
+ }
40
+
41
+ .sideber{
42
+
43
+ background-color:#3cb371;
44
+
45
+ width:300px;
46
+
47
+ float:left;
48
+
49
+ }
50
+
51
+ .contents{
52
+
53
+ background-color:#dcdcdc;
54
+
55
+ width:300px;
56
+
57
+ float:right;
58
+
59
+ }
60
+
61
+ </style>
62
+
63
+ </head>
64
+
65
+ <body>
66
+
67
+
68
+
69
+
70
+
71
+ <div class="container">
72
+
73
+
74
+
75
+ <div class="sideber">
76
+
77
+
78
+
79
+ テキスト
80
+
81
+
82
+
83
+ </div>
84
+
85
+
86
+
87
+ <div class="contents">
88
+
89
+
90
+
91
+ フロート
92
+
93
+
94
+
95
+ </div>
96
+
97
+
98
+
99
+ </div>
100
+
101
+ </body>
102
+
103
+ </html>
24
104
 
25
105
  ###試したこと
26
106