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>

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

current layout is like this

但我想我的布局应该是这样的

i want my layout in this type

请帮帮我。

注意

<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而不是表格。

Answer 2

一个简单的解决方案是将您的内容分成多行。所有图像都在第一行，第二行中的标题，下一行中的数量，依此类推。请参考以下代码：

<table>
<tr>
    <td>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="images/img-1.jpg">
    </td>
    <td>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="images/img-2.jpg">
    </td>
</tr>

<tr>
    <td>
        <h3>Battle Field dsvadv dsadhjkba dsakjdbsa</h3>
    </td>
    <td>
        <h3>Battle Field </h3>
    </td>
</tr>

<tr>
    <td>
        <span class="price"><del><span class="amount">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
    </td>
    <td>
        <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>

Answer 3

...........的 Live demo ................ < / p>

嗨，现在这个可以扔css ，因为现在你可以创建两个div 并习惯position而不是它可能 定义您的tr height 100%

现在你可以写css 就像这样

<强>的CSS

table tr{ height:100%; } table tr td { vertical-align: top; border-collapse: collapse; width: 100px; height:100%; } 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; } .order{ position:relative; border:solid 1px red; height:100%; margin-bottom:20px; } .add_to_cart{ background:yellow; position:absolute; left:0; right:0; bottom:0; }

<强> HTML

<table> <tr> <td> <div class="order"> <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://www.gravatar.com/avatar/f20d2122fec97d8544bdbb998f5da742?s=32&d=identicon&r=PG"> <h3>Battle Field dsvadv dsadhjkba dsakjdbsa</h3> <span class="price"><del><span class="amount">$ 67.00</span></del> <ins><span class="amount">$ 23.00</span></ins></span> <a href="#" class="add_to_cart">Add to cart</a> </div> </td> <td> <div class="order"> <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://www.gravatar.com/avatar/f20d2122fec97d8544bdbb998f5da742?s=32&d=identicon&r=PG"> <h3>Battle Field </h3> <span class="price"><del><span class="amount">$ 67.00</span></del> <ins><span class="amount">$ 23.00</span></ins></span> <a href="#" class="add_to_cart">Add to cart</a></div> </td> </tr> <tr> <td> <div class="order"> <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://www.gravatar.com/avatar/f20d2122fec97d8544bdbb998f5da742?s=32&d=identicon&r=PG"> <h3>Battle Field dsvadv dsadhjkba dsakjdbsa</h3> <span class="price"><del><span class="amount">$ 67.00</span></del> <ins><span class="amount">$ 23.00</span></ins></span> <a href="#" class="add_to_cart">Add to cart</a> </div> </td> <td> <div class="order"> <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://www.gravatar.com/avatar/f20d2122fec97d8544bdbb998f5da742?s=32&d=identicon&r=PG"> <h3>Battle Field </h3> <span class="price"><del><span class="amount">$ 67.00</span></del> <ins><span class="amount">$ 23.00</span></ins></span> <a href="#" class="add_to_cart">Add to cart</a></div> </td> </tr> </table>

<强> Live demo

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

3 个答案: