Question

格式化时遇到一些问题。我想要一个有两行一列的表。在顶行将是一些文字。在底行将是一个图像。我想在第一行中的文本底部和第二行中的图像顶部之间存在越来越大的差距。我也希望桌子的固定高度为250px。我添加了一个边框折叠：与图像分开，因为我遇到了FF＆amp; amp; 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 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%;
}

ff＆amp; f中的液体图像/表格即不是液体

1 个答案: