匹配两个显示内的 div 的高度：表格单元格 div答案

【问题标题】：match heights of divs inside two display: tablecell divs匹配两个显示内的 div 的高度：表格单元格 div
【发布时间】：2023-02-13 17:08:01
【问题描述】：

我遇到了与使用 divs 并将显示设置为表格单元格相关的问题。使用 table-cell 的目的是让这两个 div 的高度匹配。但是，这些 div 中的每一个都在其中设置了另一个 div，以创建您在图片中看到的黄色虚线轮廓：

当其中一个表格单元格增长时，另一个表格单元格的黄色轮廓不会增长以匹配其相邻的单元格。希望有人可以帮助我解决问题，任何帮助表示赞赏。下面是我的代码：

.generalinfocontainer {
  width: 50%;
  height: auto;
  background-image: url("https://imgur.com/qbIkHqm.png");
  display: table-cell;
  border-radius: 25px;
  text-shadow: 1px 1px #000000;
}
.statscontainer {
  width: 30%;
  height: auto;
  background-image: url("https://imgur.com/qbIkHqm.png");
  display: table-cell;
  border-radius: 25px;
  text-shadow: 1px 1px #000000;
}
.t {
  display: table;
  width: 100%;
  border-spacing: 20px;
}
.generalinfowrapper {
  border-width: 2px;
  border-color: yellow;
  border-style: dashed;
  margin: 3px;
  border-radius: 25px;
  height: 100%;
  padding: 8px;
}
.statswrapper {
  border-width: 2px;
  border-color: yellow;
  border-style: dashed;
  margin: 3px;
  border-radius: 25px;
  height: 100%;
  padding: 8px;
}
.statbar {
  border-radius: 15px;
  background-image: url("https://imgur.com/gdh95cn.png");
  padding: 1px;
  width: 100%;
  height: auto;
  border-style: solid;
  border-color: black;
  border-width: 1px;
}
.fillbar {
  border-radius: 15px;
  background-color: #a3c1ad;
  height: 100%;
  padding-left: 4px;
  border-color: black;
  border-width: 1px;
  border-style: solid;
  margin: 0px;
}
.boxtitle {
  text-align: center;
}

<div class="t">
  <div class="generalinfocontainer">
    <div class="generalinfowrapper">
      [b][size=24][color=yellow]KOMON HYUUGA[/color][/size][/b]
    </div>
  </div>
  <div class="statscontainer">
    <div class="statswrapper">
      <div class="boxtitle">
        [b][size=24][color=yellow]STATISTICS[/color][/size][/b]
      </div>
      [b]VIGOR[/b]<br />
      <div class="statbar">
        <div class="fillbar" style="width:80%;"> 80/100</div>
      </div>
      [b]CHAKRA[/b]<br />
      <div class="statbar">
        <div class="fillbar" style="width:80%;"> 80/100</div>
      </div>
      [b]SPEED[/b]<br />
      <div class="statbar">
        <div class="fillbar" style="width:80%;"> 80/100</div>
      </div>
      [b]STRENGTH[/b]<br />
      <div class="statbar">
        <div class="fillbar" style="width:80%;"> 80/100</div>
      </div>
    </div>
  </div>

【问题讨论】：

标签： html css tablecell

【解决方案1】：

使用 table-cell 的目的是让这两个 div 的高度匹配。

好吧，您可以使用Flexbox 或CSS Grid 以更少的代码完成您想要实现的目标。看一看：

.t {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.generalinfocontainer,
.statscontainer {
  background-image: url("https://imgur.com/qbIkHqm.png");
  border-radius: 25px;
  text-shadow: 1px 1px #000000;
  border-width: 2px;
  border-color: yellow;
  border-style: dashed;
  padding: 8px;
}

.statbar {
  border-radius: 15px;
  background-image: url("https://imgur.com/gdh95cn.png");
  padding: 1px;
  border: 1px solid solid black;
}
.fillbar {
  border-radius: 15px;
  background-color: #a3c1ad;
  padding-left: 4px;
  border: 1px solid black;
}
.boxtitle {
  text-align: center;
}

<div class="t">
  <div class="generalinfocontainer">
    <div class="generalinfowrapper">
      [b][size=24][color=yellow]KOMON HYUUGA[/color][/size][/b]
    </div>
  </div>
  <div class="statscontainer">
    <div class="statswrapper">
      <div class="boxtitle">
        [b][size=24][color=yellow]STATISTICS[/color][/size][/b]
      </div>
      [b]VIGOR[/b]<br />
      <div class="statbar">
        <div class="fillbar" style="width:80%;"> 80/100</div>
      </div>
      [b]CHAKRA[/b]<br />
      <div class="statbar">
        <div class="fillbar" style="width:80%;"> 80/100</div>
      </div>
      [b]SPEED[/b]<br />
      <div class="statbar">
        <div class="fillbar" style="width:80%;"> 80/100</div>
      </div>
      [b]STRENGTH[/b]<br />
      <div class="statbar">
        <div class="fillbar" style="width:80%;"> 80/100</div>
      </div>
    </div>
  </div>
</div>

【讨论】：