Question

我有一个div有3个div，里面显示如下表：

＆＃13;

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

＆＃13;

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

＆＃13;

3. div突然有一个填充顶部：无法展示图片，因为我需要声誉大声笑......

正如你所看到的那样，3. div的内容不像其他2个div那样位于顶部。

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

1 个答案:

答案 0 :(得分：2)

Answer 1

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

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

CSS显示div作为表

1 个答案: