如何使三个内部div具有相同的高度？

要使三个内部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元无门槛券

手把手带您无忧上云