html - CSS 将 div 显示为表格

Question

我有一个包含 3 个 div 的 div，它显示为如下表格:

.WKDivTable img {
  width: 80px;
  height: auto;
  padding: 5%;
  padding-bottom: 0px;
}
.WKDivTable span {
  padding-right: 0px;
  font-size: 0.7em;
}
.WKDivTable input[type=number] {
  width: 50%;
  margin-top: 0px;
  height: 30px;
}
.WKDivTable > div {
  display: table-cell;
  padding: 0%;
}
.WKDivTable {
  display: table;
  table-layout: fixed;
}

<div class="WKProdukt">
  <h3>Quest America</h3>
  <div class="WKDivTable">
    <div>
      <img src="<?php echo $ROOT.'product/img/1020-quest-america.jpg'?>" title="Quest America">
    </div>
    <div>
      <span>Perfektes Modell für Amerikanische Patrioten. Balsaholz Flügel, abgerundete Plastikspitze machen diese Rakete zu einer guten Skill Level 1 Rakete. Landefallschirm ist dabei. Motoren A6-3 rocket B6-4, C6-5 Rocket Engine.</span>	
    </div>
    <div>
      <span>Anzahl</span>
      <input type="number" title="Anzahl Artikel die sie bestellen" value="1" />
      <span class="bold">Preis: 50.-</span>
      <span class="bold">Produkt-ID: 1020</span>
      <span class="bold">Status: Sofort Lieferbar</span>
    </div>
  </div>
</div>

3.div 突然有了 padding-top: 无法显示图片，因为我需要声望大声笑...

如您所见，3.div 的内容不像其他 2 个 div 那样位于顶部。

有人知道这可能是什么吗？

Answer 1

您可能需要调整内部 div 的 vertical-align，例如

.WKDivTable > div {
    display : table-cell;
    padding : 0;
    vertical-align : top;
}