Comment aligner verticalement l'image dans une cellule td, sans verticalement aligner

Question

code suivant:

<div id="test"> 
    <table> 
    <tbody> 
     <tr> 
     <td> 
      <img src="img1.jpg" /> 
      <p>Bla bla bla</p> 
      <p><a href="#"><img src="img2.jpg"></a></p> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

et CSS:

#test td { 
    width: 450px; 
    height: 220px; 
    vertical-align: top; 
    border-bottom: 1px solid #000; 
    border-right: 50px solid #fff; 
} 

#test td p { 
    margin: 0 0 10px 0; 
    width: 290px; 
} 

#test img { 
    padding: 20px 5px 5px 5px; 
    float:left; 
} 

Comment puis-je aligner la deuxième image avec le lien vers le bas de la cellule? Je googler beaucoup, mais aucune des solutions de travail pour moi ...

Answer 1

Donnez le récipient (td) position: relative et l'image, ou plus précisément l'<p> qui contient l'image, position: absolute; bottom: 0;. See it in action here.

Answer 2

Essayez cette

<td valign="top"> 
      <img src="img1.jpg" /> 
      <p>Bla bla bla</p> 
      <p><a href="#"><img src="img2.jpg"></a></p> 
     </td> 

Answer 3

Essayez ceci:

<img src="img1.jpg" /> 
<p>Bla bla bla</p> 
<div class="clearFloat"></div> 
<p><a href="#"><img src="img2.jpg"></a></p> 

Et ce CSS:

#test td { 
    width: 450px; 
    height: 220px; 
    vertical-align: top; 
    border-bottom: 1px solid #000; 
    border-right: 50px solid #fff; 
} 

#test td p { 
    margin: 24px 0 0 0; 
    width: 290px; 
    float: left; 
} 

#test img { 
    padding: 20px 5px 5px 5px; 
    float:left; 
} 
.clearFloat { 
    clear: both; 
} 

DEMO: http://jsfiddle.net/maWJ2/

Answer 4

Retirez float:left; de #test img

#test img { 
    padding: 20px 5px 5px 5px; 
} 

Référez LIVE DEMO