html - 将 div 与压缩段落垂直对齐(不能使用 flex)

Question

我知道如何对齐 div，但我使用的是 wkhtmltopdf，它不支持 display flex。我写了一个fiddle带有我的问题示例的代码。这是解释:我有三个 div，里面有两个段落。第三段要压缩到一个固定的高度(这里我放的是3cm)。当我这样做时，我无法像您在 fiddle 示例中看到的那样对齐我的 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

您可以使用 vertical-align: bottom; 重新对齐 div在 .ib 类中:

.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>