html - ff 中的液体图像/表格，即不是液体

Question

格式有一些问题。我正在尝试制作一个包含两行和一列的表格。在顶行将是一些文本。在底行将是一个图像。我希望第一行文本底部和第二行图像顶部之间的间隙越来越大。我还希望表格的固定高度为 250px。我添加了一个 border-collapse: separate 到图像，因为我遇到了 FF & IE 的问题，不想将图像调整到表格的大小，但它似乎消除了图像和文本之间的间隙。

这里有一个 jsFiddle:http://jsfiddle.net/Qc66W/

我似乎找不到解决这个问题的方法。如果你能帮助我，我将不胜感激!!!

.HomeWidgetTable {
    margin:0px;
    padding:0px;
    width:100%;
    border:0px;
    height:250px;
}
.HomeWidgetTable tr:first-child td{
    text-align:left;
    vertical-align:top;
    word-wrap:break-word;
}
.HomeWidgetTable tr:last-child td{
    text-align:center;
    vertical-align:bottom;
    word-wrap:break-word;
}
.HomeWidgetTable img{
    width:100%;
    border-collapse: separate;
}

Answer 1

这是您想要实现的目标吗？不需要表格。

有一个 fiddle - Fiddle Link!

HTML

<div class="HomeWidget">
    <p>Text</p>
    <a href="/about/blog/">
        <img src="http://www.warbirdalley.com/images/b25-topsecret1.JPG" />
    </a>
</div>

CSS

.HomeWidget {
    margin: 0 auto;
    min-width: 500px;
    max-width: 800px;
}
.HomeWidget img {
    width: 100%;
}