CSS 将 div 显示为表格答案

【问题标题】：CSS display div as tableCSS 将 div 显示为表格
【发布时间】：2015-04-02 08:21:37
【问题描述】：

我有一个 div，里面有 3 个 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 那样位于顶部。

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

【问题讨论】：

标签： html css padding webshop

【解决方案1】：

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

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

【讨论】：