質問編集履歴
3
ソースコードを変更しました
test
CHANGED
File without changes
|
test
CHANGED
@@ -18,9 +18,9 @@
|
|
18
18
|
|
19
19
|
|
20
20
|
|
21
|
-
追記:
|
21
|
+
追記:アドバイス頂いたソースです。
|
22
22
|
|
23
|
-
|
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
|
-
|
47
|
+
.top {
|
50
48
|
|
51
|
-
|
49
|
+
height: 100%;
|
52
50
|
|
53
|
-
|
51
|
+
width: 100%;
|
54
52
|
|
55
|
-
|
53
|
+
margin: 0;
|
56
54
|
|
57
|
-
|
55
|
+
padding: 0;
|
58
56
|
|
59
|
-
|
57
|
+
}
|
60
58
|
|
61
|
-
|
59
|
+
.top2 {
|
62
60
|
|
63
|
-
|
61
|
+
display: flex;
|
64
62
|
|
65
|
-
|
63
|
+
height: 100%;
|
66
64
|
|
67
|
-
|
65
|
+
}
|
68
66
|
|
69
|
-
|
67
|
+
.side {
|
70
68
|
|
71
|
-
|
69
|
+
width: 20%;
|
72
70
|
|
73
|
-
|
71
|
+
background-color: blue;
|
74
72
|
|
75
|
-
|
73
|
+
}
|
76
74
|
|
77
|
-
|
75
|
+
.main {
|
78
76
|
|
79
|
-
|
77
|
+
width: 80%;
|
80
78
|
|
81
|
-
|
79
|
+
background-color: red;
|
82
80
|
|
83
|
-
|
81
|
+
}
|
84
82
|
|
85
83
|
</style>
|
86
84
|
|
87
85
|
```
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
![画像](913474176ac2abd5e96fab1d407e3e85.png)
|
2
詳しく記載しました
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
題名の誤字を修正しました
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
大枠の要素を2:8で横並び
|
1
|
+
大枠の要素を2:8で横並びにしたい
|
test
CHANGED
File without changes
|