Question

我正在处理一个包含表格和图像的php文档，其设置方式是我有一个包含3列的表，两个包含文本，另一个包含图片。我遇到的问题是图像都是不同的大小，导致我的文本行导致它们之间的间隔，有没有办法格式化文本以保留其原始格式？以下是我所谈论的http://www.cnghl.biz/cnghldb/test.php?PlayerID=2818

的示例

这是CSS

  <style>
 a {text-decoration:none;}
  }
  td {
  vertical-align: top;
   }
 td img {
vertical-align: top;
 }
 .space { 
 line-height: .3 em; 
 }
 .wrap {
float:right;
}
</style>

这是PHP

  Echo      "<td width='659'><div align='center'>";
  Echo        "<table width='602' border='0'>";
  Echo          "<tr>";
  Echo            "<td colspan='3'><h1>".$row['FirstName']." ".$row['LastName']."</h1>  </td>";
  Echo            "</tr>";
  Echo          "<tr>";
  Echo            "<td width='164'><strong>Birthdate:</strong>".$row['DOB']."</td>";
            $DOB = $row[DOB]; //dd.mm.yyyy
            $user_date = new DateTime($DOB);
            $curr_date = new DateTime();
            $age_cal = $curr_date->diff($user_date);
 Echo            "<td width='219'><strong>Age:</strong>".$age_cal->y;"</td>";
 Echo            "<td width='205' rowspan='6'><div align='center'><img  src=\"http://www.cnghl.biz/cnghldb/images/".$iPlayerID.".jpg\">";
 Echo          "</tr>";
 Echo          "<tr>";
 Echo            "<td><strong>Nation:</strong>".$row['Nation']."</td>";
 Echo            "<td><strong>CNGHL Team:</strong>".$row['CNGHLRights']. "</td>";
 Echo            "</tr>";
 Echo          "<tr>";
 Echo            "<td><strong>Position:</strong>".$row['Position']. "</td>";
 Echo            "<td><strong>Weight:</strong>".$row['Weight']. "</td>";
 Echo            "</tr>";
 Echo          "<tr>";
 Echo            "<td><strong>Height:</strong>".$row['Height']. "</td>";
 Echo            "<td><strong>NHL Team:</strong>".$row['Team']. "</td>";
 Echo            "</tr>";
 Echo          "<tr>";
 Echo            "<td><strong>Draft Year:</strong>".$row['CNDraftYR']."</td>";
 Echo            "<td><strong>Draft Position:</strong>".$row['CNDraftPOS']."</td>";
 Echo            "</tr>";
 Echo          "<tr>";
 Echo            "<td height='25'><strong>Drafted By:</strong>".$row['DrTeam']."</td>";
 Echo            "<td><strong>Current Salary:</strong></td>";
 Echo            "</tr>";
 Echo        "</table>";
 Echo      "</div></td>";
 Echo      "<td width='141'>&nbsp;</td>";
 Echo    "</tr>";
 Echo  "</table>";
 Echo "</div>";

我试图调整图像的大小，但这并没有解决问题，我们将非常感谢任何帮助。

Answer 1

如果问题是图像大小不同，您可以为每个图像指定一个特定的宽度。或者，如果您不想自己调整图像，请给出div / td图像所处的特定宽度和高度等于最大图像并且不会发生变化。

Answer 2

绝对不要将表用于布局目的。顺便说一下，这是HTML表格的预期行为，将其大小扩展到内容。

您可以使用div来实现此目的，解决您的问题并拥有更多语义标记，并拥有更清晰的标记

我还建议您将播放器的数据包装到定义列表（dl元素）中，以获得更加语义化的方法。

Example implementation

Answer 3

您的rowspan设置为6，但表格中有<tr>。 td { vertical-align: top; }是您需要的CSS。

CSS：对齐文本到顶部，文本行之间没有间距

3 个答案: