将div与压缩的段落垂直对齐（不能使用flex）

Question

我知道如何对齐div，但是我使用的是wkhtmltopdf，它不支持display flex。 我已经写了一个fiddle代码，并举例说明了我的问题。 这里是解释：我有三个div，里面有两个段落。第三段应压缩到固定高度（在这里我放3cm）。当我这样做时，我无法像在小提琴示例中看到的那样对齐div。您会注意到，如果删除此约束（宽度：3cm），则三个div会完美对齐。 即使有约束，我应该怎么做才能使它们全部对齐？

代码如下：

.box {
  width: 15cm;
  border: 1px solid blue;
}

.ib {
  display: inline-block;
  border: 1px solid yellow;
  text-align: center;
}

.compressed_paragraph {
  width: 3cm;
}

.set_height {
  height: 2cm;
}

<div class="box">
  <div class="ib box1">
    <div class="set_height">
      <p>First text</p>
      <p>Some text underneath</p>
    </div>
  </div>
  <div class="ib box2">
    <div class="set_height">
      <p>Second text</p>
      <p>Some text underneath</p>
    </div>
  </div>
  <div class="ib box3">
    <div class="set_height">
      <p class="compressed_paragraph">Should compress the thrird text</p>
      <p>Some text underneath</p>
    </div>
  </div>
</div>

Answer 1

您可以在.ib类中使用vertical-align: bottom;重新调整div：

.ib {
  display: inline-block;
  border: 1px solid yellow;
  text-align: center;
  vertical-align: top;
}

注意：由于div具有相同的高度，大多数对齐方式也可以使用。

.box {
  width: 15cm;
  border: 1px solid blue;
}

.ib {
  display: inline-block;
  border: 1px solid yellow;
  text-align: center;
  vertical-align: top;
}

.compressed_paragraph {
  width: 3cm;
}

.set_height {
  height: 2cm;
}

<div class="box">
  <div class="ib box1">
    <div class="set_height">
      <p>First text</p>
      <p>Some text underneath</p>
    </div>
  </div>
  <div class="ib box2">
    <div class="set_height">
      <p>Second text</p>
      <p>Some text underneath</p>
    </div>
  </div>
  <div class="ib box3">
    <div class="set_height">
      <p class="compressed_paragraph">Should compress the thrird text</p>
      <p>Some text underneath</p>
    </div>
  </div>
</div>