質問編集履歴

3

ソースコードを変更しました

2020/11/11 09:10

投稿

shirout
shirout

スコア36

test CHANGED
File without changes
test CHANGED
@@ -18,9 +18,9 @@
18
18
 
19
19
 
20
20
 
21
- 追記:top2がsideとmainの親なのでこちらにdisplayflexを行ました。
21
+ 追記:アドバイス頂いたソースです
22
22
 
23
- 子要素flort leftやrightも試ました
23
+ 画面は真っ白す。vue.jsなのでtemplateに対するクラス定義のミスでょうか
24
24
 
25
25
 
26
26
 
@@ -38,54 +38,48 @@
38
38
 
39
39
  </template>
40
40
 
41
-
42
-
43
41
  ```
44
42
 
45
43
  ```css
46
44
 
47
45
  <style>
48
46
 
49
- .top {
47
+ .top {
50
48
 
51
- height: 100%;
49
+ height: 100%;
52
50
 
53
- width: 100%;
51
+ width: 100%;
54
52
 
55
- }
53
+ margin: 0;
56
54
 
57
- .top2 {
55
+ padding: 0;
58
56
 
59
- height: 100%;
57
+ }
60
58
 
61
- width: 100%;
59
+ .top2 {
62
60
 
63
- }
61
+ display: flex;
64
62
 
65
- .side {
63
+ height: 100%;
66
64
 
67
- height: 100%;
65
+ }
68
66
 
69
- width: 20%;
67
+ .side {
70
68
 
71
- background-color: blue;
69
+ width: 20%;
72
70
 
73
- }
71
+ background-color: blue;
74
72
 
75
- .main {
73
+ }
76
74
 
77
- height: 100%;
75
+ .main {
78
76
 
79
- width: 80%;
77
+ width: 80%;
80
78
 
81
- background-color: red;
79
+ background-color: red;
82
80
 
83
- }
81
+ }
84
82
 
85
83
  </style>
86
84
 
87
85
  ```
88
-
89
-
90
-
91
- ![画像](913474176ac2abd5e96fab1d407e3e85.png)

2

詳しく記載しました

2020/11/11 09:10

投稿

shirout
shirout

スコア36

test CHANGED
File without changes
test CHANGED
@@ -15,6 +15,12 @@
15
15
  その時サイドは高さが小さくなっています。
16
16
 
17
17
  解決方法はあるでしょうか?
18
+
19
+
20
+
21
+ 追記:top2がsideとmainの親なのでこちらにdisplayflexを行いました。
22
+
23
+ 子要素でflort leftやrightも試しました。
18
24
 
19
25
 
20
26
 

1

題名の誤字を修正しました

2020/11/11 08:37

投稿

shirout
shirout

スコア36

test CHANGED
@@ -1 +1 @@
1
- 大枠の要素を2:8で横並び西太子堂
1
+ 大枠の要素を2:8で横並びにしたい
test CHANGED
File without changes