如何垂直对齐图像中的TD手机，没有垂直对齐

以下代码：如何垂直对齐图像中的TD手机，没有垂直对齐

<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>

和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; 
}

我该如何调整第二图像与链接的底部细胞的？我在谷歌上搜索了很多，但没有为我解决工作......

来源

2012-08-31 i--

你可以使用两行和两个valign顶部它将会像你想要的。 –

给容器（td）position: relative和图像，或者更具体包含图像的<p>， position: absolute; bottom: 0;。 See it in action here。

来源

2012-08-31 12:41:58 Supr

甜美！谢谢！ –

'position：relative' loose my cells border :( – Eleanor

试试这个

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

来源

2012-08-31 12:39:16

我觉得没有让自己清楚。我希望内容与顶部垂直对齐，但最后一个图像img2.jpg与底部对齐。 –

试试这个：

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

而这个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/

来源

2012-08-31 12:42:41

从#test img

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

删除 float:left;

参考LIVE DEMO

来源

2012-08-31 12:43:23

如何垂直对齐图像中的TD手机，没有垂直对齐

回答

相关问题