添加img標籤時css顯示錶格佈局中斷

Question

我有一個關於顯示錶和img標籤的問題。下面是ilustrate問題的jsfindle鏈接：

jsfiddle

代碼簡化：

<section> 
<article class="image"> 
    <img src="http://www.locostusa.com/forums/download/file.php?avatar=16004_1381633145.jpg"/> 
</article> 
<article> 
    <span>.....</span> 
</article> 
</section> 

我有顯示分區選項卡：表內與顯示兩篇文章標籤：表單元格。在第一篇文章標籤裏面我有一個img標籤，在第二篇文章中我只有一段文字。

問題在於文本呈現的圖像大小几乎大於圖像大小。我能做些什麼來擺脫空間？

Answer 1

將vertical-align:top添加到article元素，因爲您已將顯示更改爲table-cell。 vertical-align屬性的默認值爲baseline;因此文本與底部對齊。

Updated Example

article { 
    display: table-cell; 
    border: 1px solid grey; 
    vertical-align: top; 
} 

值得一提的是，如middle和bottom值也能工作。你基本上只需要從默認值改變它。