html - 垂直对齐彼此相邻的两个 div 到相同的高度？

Question

我想将两个相邻的 div(或类似的东西)对齐到相同的高度。

此外，包含两个 div 的包装应垂直居中对齐。

试过这样的东西

.wrapper {
  background-color: #f1f1f1;
  height: 300px;
  width: 50%;
  margin: 0 auto;
  display: table;
}

.innerWrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: fit-content;
}

.box {
  display: inline-block;
  padding: 25px 25px;
  opacity: 0.8;
  background-color: #32CD32;
}

<div class="wrapper">
    <div class="innerWrapper">
      <div class="box">This is a box</div>
      <div class="box">
        <div>This is a box</div>
        <div>This is a box</div>
      </div>
    </div>
</div>

我希望两个 div 的高度与每个 div 中的内容无关。

Answer 1

只需在 .innerWrapper 中使用 display: flex;

.wrapper {
  background-color: #f1f1f1;
  height: 300px;
  width: 50%;
  margin: 0 auto;
  display: table;
}

.innerWrapper {
  display: flex;
  text-align: center;
  width: fit-content;
}

.box {

  padding: 25px 25px;
  opacity: 0.8;
  background-color: #32CD32;
}

<div class="wrapper">
    <div class="innerWrapper">
      <div class="box">This is a box</div>
      <div class="box">
        <div>This is a box</div>
        <div>This is a box</div>
      </div>
    </div>
</div>

或者如果你想要中间的盒子。

.wrapper {
  background-color: #f1f1f1;
  height: 300px;
  width: 50%;
  margin: 0 auto;
  display: flex;
  align-items:center;
  justify-content:center;
}

.innerWrapper {
  display: flex;
  text-align: center;
  width: fit-content;
}

.box {
  display: inline-block;
  padding: 25px 25px;
  opacity: 0.8;
  background-color: #32CD32;
}

<div class="wrapper">
    <div class="innerWrapper">
      <div class="box">This is a box</div>
      <div class="box">
        <div>This is a box</div>
        <div>This is a box</div>
      </div>
    </div>
</div>