Question

我想在消防车图像旁边放置4个灰色块，但无论我如何将它们放在一张桌子上，它们都会显得更低，就像它们上方有200px的填充物一样。我无法弄清楚它们为什么继续移动。我希望它们顶部对齐，并且添加垂直对齐没有帮助。

<table width="1000" border="0" height="322">
  <tbody>
    <tr>
      <td><img src="/Images/Monroe_Fire_Department_Website_Banner_03.jpg"></td>
      <td class="work"><img src="/Images/Banner-Nav-Background-Gray_03.jpg">
      <img src="/Images/Banner-Nav-Background-Gray_03.jpg">
      <img src="/Images/Banner-Nav-Background-Gray_03.jpg">
      <img src="/Images/Banner-Nav-Background-Gray_03.jpg"></td>
    </tr>
  </tbody>
</table>

请使用以下链接查看示例/源代码。

http://monroefiredepartment.businesscatalyst.com/test.html

Answer 1

违规的CSS看起来像vertical-align: baseline应用于页面上的所有元素。如果您检查包含四个灰色块的<td>元素，并取消选中vertical-align: baseline，则块会向上移动并与消防车图像的顶部对齐。

我认为您可以安全地从样式表中删除它，因为它似乎不会影响页面上的任何其他元素。

Answer 2

试试这个

<table width="1000" border="0" height="322">
  <tbody>
    <tr>
      <td><img src="/Images/Monroe_Fire_Department_Website_Banner_03.jpg"></td>
      <td valign="top" style="
    float: left;
"><img src="/Images/Banner-Nav-Background-Gray_03.jpg">
      <img src="/Images/Banner-Nav-Background-Gray_03.jpg">
      <img src="/Images/Banner-Nav-Background-Gray_03.jpg">
      <img src="/Images/Banner-Nav-Background-Gray_03.jpg"></td>
    </tr>
  </tbody>
</table>

桌子内的图像显示在桌子外面

2 个答案: