HTML表格行中的图像

Question

这让我很生气，这可能是有史以来最愚蠢的错误！

基本上我想要的是每张照片下面都有一个带有名字的小盒子。 我想连续拍摄4张照片。

不幸的是，这就是IE中发生的事情：

我很抱歉这看起来非常凌乱！任何帮助很多人赞赏！

    <table style="background-color:#FFFFFF" width="100%" border-collapse:collapse>
      {section name=signups_loop loop=$signups max=4}


<a href='{$url->url_create("profile",$signups[signups_loop]->user_info.user_username)}'><img src='{$signups[signups_loop]->user_photo("./images/nophoto.gif")}'  width='169' height='172' border='0' vertical-align=bottom></a>



      {cycle name="startrow" values="<tr>,,,,"}

    <td width=201>
<div style="background-color:#809DFF; height: 25px; width: 169px; margin-top: -15px>
<font size="1" face="Tahoma" color="black"><b><div id="feat3">

 <a href='{$url->url_create("profile",$signups[signups_loop]->user_info.user_username)}'><font color="white" face="Tahoma">{$signups[signups_loop]->user_displayname|truncate:15:"...":true}</font></a></b><br></font></font></div>

      </td>
      {cycle name="endrow" values=",,,,</tr>"}
      {/section}</table>

Answer 1

您可以尝试将相关文本与图像放在容器内 - 左浮动值。

e.g。 （记得我没有测试过这个，但希望它有所帮助）

    <table style="background-color:#FFFFFF" width="100%" border-collapse:collapse>
    <tr>
    <td>
    {section name=signups_loop loop=$signups max=4}

      <div class="imageItemWithTextContainer" style="width:169px; float:left; "> <!-- CONTAINER START -->

      <a href='{$url->url_create("profile",$signups[signups_loop]->user_info.user_username)}'><img src='{$signups[signups_loop]->user_photo("./images/nophoto.gif")}'  width='169' height='172' border='0' vertical-align=bottom></a>

      <div style="background-color:#809DFF; height: 25px; width: 169px; margin-top: -15px>
      <font size="1" face="Tahoma" color="black"><b><div id="feat3">

      <a href='{$url->url_create("profile",$signups[signups_loop]->user_info.user_username)}'><font color="white" face="Tahoma">{$signups[signups_loop]->user_displayname|truncate:15:"...":true}</font></a></b><br></font></font></div>

      </div> <!-- CONTAINER END -->

    {/section}
    </td>
    </tr>
    </table>