要使三个内部div具有相同的高度,可以使用CSS的Flexbox或Grid布局。以下是两种方法的示例:
HTML代码:
<div class="container">
<div class="box">内容1</div>
<div class="box">内容2,这个div的高度会自动调整以与其他div相同</div>
<div class="box">内容3</div>
</div>
CSS代码:
.container {
display: flex;
}
.box {
border: 1px solid black;
padding: 20px;
margin: 10px;
}
HTML代码:
<div class="container">
<div class="box">内容1</div>
<div class="box">内容2,这个div的高度会自动调整以与其他div相同</div>
<div class="box">内容3</div>
</div>
CSS代码:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.box {
border: 1px solid black;
padding: 20px;
margin: 10px;
}
这两种方法都可以使三个内部div具有相同的高度。你可以根据自己的需求选择使用哪种方法。
领取专属 10元无门槛券
手把手带您无忧上云