我的 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">$ 67.00</span></del> <ins><span class="amount">$ 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">$ 67.00</span></del> <ins><span class="amount">$ 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>
内的标题不同产品的文本长度可能不同。因此,价格应位于标题下方,按钮应排成一行,即位于内容的底部,就像第二张引用图片一样。
最佳答案
再创建一个<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">$ 67.00</span></del> <ins><span class="amount">$ 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">$ 67.00</span></del> <ins><span class="amount">$ 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
而不是表格。
关于html - 对齐表格中文本和图像的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12967841/