對齊位置

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

........... Live demo ................

嗨現在這個可能拋出CSS爲現在你可以創建2格並用於position比這是可能的和定義您tr height 100%

現在你可以寫CS小號因爲這樣

的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">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;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">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;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">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;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">$&nbsp;67.00</span></del> <ins><span class="amount">$&nbsp;23.00</span></ins></span> 
      <a href="#" class="add_to_cart">Add to cart</a></div> 
     </td> 
    </tr> 
    </table> 

Live demo

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

只需創建另一個<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而不是表格。