CSS显示格为表

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> \t 
 
    </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格设置突然有填充顶： 能”吨显示图片，因为我需要声誉大声笑...

正如你可以看到3. div的内容不像其他2 div的顶部。

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

Answer 1

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

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