要使三个内部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具有相同的高度。你可以根据自己的需求选择使用哪种方法。
云+社区沙龙online第6期[开源之道]
云+社区沙龙online [技术应变力]
云+社区技术沙龙 [第31期]
DB TALK 技术分享会
云+社区技术沙龙[第1期]
T-Day
云+社区技术沙龙[第16期]
云+社区技术沙龙[第11期]
云+社区技术沙龙[第10期]
领取专属 10元无门槛券
手把手带您无忧上云