要实现垂直堆叠两个div,并将它们放置在另一个div中,可以使用CSS的flexbox布局或者grid布局来实现。
使用flexbox布局:
示例代码如下:
<div class="container">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
</div>
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 200px; /* 设置父div的高度,可以根据需要调整 */
}
.div1, .div2 {
background-color: #ccc;
height: 50px; /* 设置子div的高度,可以根据需要调整 */
}
使用grid布局:
示例代码如下:
<div class="container">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
</div>
.container {
display: grid;
grid-template-rows: auto;
justify-items: center;
height: 200px; /* 设置父div的高度,可以根据需要调整 */
}
.div1, .div2 {
background-color: #ccc;
height: 50px; /* 设置子div的高度,可以根据需要调整 */
}
以上是使用CSS实现垂直堆叠两个div的方法,可以根据具体需求调整样式和尺寸。
领取专属 10元无门槛券
手把手带您无忧上云