添加img标记时，css显示表格布局中断

Question

我对显示表和img标签的css有问题。这是解决问题的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>

我有一个带有display：table的部分选项卡和两个带有display：table-cell的文章标签。在第一篇文章标签里面我有一个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等值也会起作用。你基本上只需要从默认值中更改它。