以下のようなHTMLで
app.component
<div class="parent"> <div class="child1"></div> <div class="child2"></div> </div>
child1のwidthを80%, child2のwidthを20%にしていました。
ここでchild1を新しくcomponentとして切り出し以下のようにしました。
app.component
<div class="parent"> <app-child1></app-child1> <div class="child2"></div> </div>
child1.component
<div class="child1"></div>
ここでchild1のwidthを80%にしたのですがうまく行きません。。。
前よりだいぶ小さくなっており、親のwidthの80%になっていないのです。
この場合、どうすれば親のwidthの80%にできるのでしょうか?
適用しているスタイルの一覧は以下です。
以前のスタイルはchild1.componentのスタイルをそのままapp.componentに書いていただけです。
app.component
.parent { display: flex; } .child2 { border-style: solid; width: 20%; margin-left: 2%; margin-right: 2%; }
child1.component
.child1 { border-style: solid; width: 80%; margin-left: 2%; }
(margin-leftも以前と違う感じになっていました。。。)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/03 00:06