html - 表 td，不同的 div 高度垂直对齐顶部
问题描述
我目前正在编写一个有 2 列的时事通讯，但是当另一个有多行时，第一个 div 的高度不会调整。我希望它们垂直对齐顶部或根据内容自动调整高度而不更改图像和阅读更多按钮高度。一切都必须排队。（两个图像对齐，在 div 的底部阅读更多内容等）
这是代码：
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="650" class="contenttable" align="center">
<tbody>
<tr>
<td style="font-size:0;">
<div class="listing_text fullwidthsm" style="display:inline-block;padding-top:5%;padding-bottom:5%;padding-right:5%;padding-left:5%;width:40%;height: 100%;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tbody>
<tr height="38">
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;color:#68C04A;font-size:16px;">
<a href="#" title="The Musical Circus Duo. Tuesday August 18 at 7 p.m." style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#68C04A;text-decoration:none;text-align:right;width:100%;display:block;font-weight:bold;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;">
The Musical Circus Duo. Tuesday August 18 at 7 p.m.
</a>
</td>
</tr>
<tr>
<td style="font-size:10px;line-height:1;"> </td>
</tr>
<tr>
<td>
<a href="#" title="The Musical Circus Duo. Tuesday August 18 at 7 p.m." style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#68C04A;text-decoration:none;text-align:right;width:100%;display:block;font-weight:bold;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;">
<img src="https://img.url" width="100%">
</a>
</td>
</tr>
<tr>
<td style="font-size:10px;line-height:1;"> </td>
</tr>
<tr>
<td class="listing_text" align="right">
<a href="#" title="The Musical Circus Duo. Tuesday August 18 at 7 p.m." style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#68C04A;text-decoration:none;text-align:right;width:100%;display:block;font-weight:bold;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;">Read more ></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="listing_text fullwidthsm" style="display:inline-block;padding-top:5%;padding-bottom:5%;padding-right:5%;padding-left:5%;width:40%;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tbody>
<tr height="38">
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;color:#68C04A;font-size:16px;">
<a href="#" title="Special Meeting Of The Council On Tuesday, August 11, At 7:00 P.M." style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#68C04A;text-decoration:none;text-align:right;width:100%;display:block;font-weight:bold;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;">
Special Meeting Of The Council On Tuesday, August 11, At 7:00 P.M.
</a>
</td>
</tr>
<tr>
<td style="font-size:10px;line-height:1;"> </td>
</tr>
<tr>
<td>
<a href="#" title="Special Meeting Of The Council On Tuesday, August 11, At 7:00 P.M." style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#68C04A;text-decoration:none;text-align:right;width:100%;display:block;font-weight:bold;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;">
<img src="https://img.url" width="100%">
</a>
</td>
</tr>
<tr>
<td style="font-size:10px;line-height:1;"> </td>
</tr>
<tr>
<td class="listing_text" align="right">
<a href="#" title="Special Meeting Of The Council On Tuesday, August 11, At 7:00 P.M." style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#68C04A;text-decoration:none;text-align:right;width:100%;display:block;font-weight:bold;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;">Read more ></a>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
