これを達成する方法は複数あります。具体的にはを絶対配置できますが、ここではそれに合わせて擬似を使用することにしました。この作業は、したがって親の中央にセンタリングされ、擬似の高さと一致していることである作るもの
。
スタックは
.container {
display: flex;
flex-direction: column; /* flow vertically */
justify-content: space-between; /* create a gap between items */
height: 200px;
align-items: center;
background: yellow;
}
.container .centered {
width: 90%;
height: 80px;
background: lime;
}
.container .bottomright {
width: 20%;
background: lime;
align-self: flex-end; /* align right */
}
.container::before,
.container .bottomright {
content: '';
height: 40px;
}
/* extra styling, make text centered */
.container .centered,
.container .bottomright {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="centered">
55
</div>
<div class="bottomright">
56
</div>
</div>
スニペット
あなたはcontainer
.container {
display: flex;
flex-direction: column; /* flow vertically */
align-items: center;
background: yellow;
}
.container .centered {
width: 90%;
height: 80px;
margin: 30px 0; /* top/bottom margin */
background: lime;
}
.container .bottomright {
width: 20%;
background: lime;
align-self: flex-end; /* align right */
}
.container::before,
.container .bottomright {
content: '';
height: 40px;
}
/* extra styling, make text centered */
.container .centered,
.container .bottomright {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="centered">
55
</div>
<div class="bottomright">
56
</div>
</div>
上の高さを設定することを避けるために、同様のマージンでこれを達成することができます
問題を解決するためのコードスニペットを追加できますか? –
とタイトルを変更すると、問題が正確に反映されますか? –