html - 对齐表格中文本和图像的位置

Question

我的 html 标记是这样的

  <table>
    <tr>
      <td>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="images/img-1.jpg">
        <h3>Battle Field dsvadv dsadhjkba dsakjdbsa</h3>
        <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
        <a href="#">Add to cart</a>
      </td>
      <td>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="images/img-2.jpg">
        <h3>Battle Field </h3>
        <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
        <a href="#">Add to cart</a>
      </td>
    </tr>
  </table>

css是这样的

<style type="text/css">
table tr td {
  vertical-align: top;
  border-collapse: collapse;
  width: 100px;
}
td img {
  padding: 10px;
  border: 1px solid #ccc;
}
td h3 {
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  margin: 0;
}
td span {
  display: inline-block;
  font-size: 12px;
}
td a {
  clear: both;
  display: block;
  vertical-align: bottom;
  margin: 20px 0 0 0;
}
</style>

在这之后我的布局是这样的

但我希望我的布局应该是这样的

请帮帮我。

注意

<h3>...</h3> 内的标题不同产品的文本长度可能不同。因此，价格应位于标题下方，按钮应排成一行，即位于内容的底部，就像第二张引用图片一样。

Answer 1

再创建一个<tr>并将按钮移动到 <tr> .

<table>
<tr>
  <td>
    <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="y5g17.png">
    <h3>Battle Field dsvadv dsadhjkba dsakjdbsa</h3>
    <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
  </td>
  <td>
    <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="y5g17.png">
    <h3>Battle Field </h3>
    <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
  </td>
</tr>
<tr>
    <td><a href="#">Add to cart</a></td>
    <td><a href="#">Add to cart</a></td>
</tr>
</table>

这是您现有代码最简单的方法。

另一种方法是使用 div's而不是表格。