Question

在html表中添加额外的行（三列图像）时 - 添加新徽标会导致表断开，第一行扩展到大约900px宽。什么可能导致这种剧烈变化的想法？

（1000行可能有点多，所以我将添加代码在整个表中向下看的样本。）

<tr>
<td style="text-align: center;">
<p>
<img alt="Safelok" src="http://www.optrafair-london.co.uk/g/2014/logo/hilco_10_safelok_logo.jpg" style="width: 85px; height: 57px;" /></p>
</td>
<td style="text-align: center;">
<br />
<a href="http://www.optrafair-london.co.uk/Exhibitor/SPECSAVERS-OPTICAL-SUPERSTORES-LTD" target="_blank"><img alt="Specsavers" src="http://www.optrafair-london.co.uk/g/2014/logos/specsavers_resized.jpg" style="width: 122px; height: 50px;" /></a></td>
<td style="text-align: center;">
<img alt="Ziggi" src="http://www.optrafair-london.co.uk/g/2014/logos/capitol_ziggi.jpg" style="width: 126px; height: 62px;" /></td>
</tr>
</tbody>
</table>

现在我知道每个图像的组合像素宽度不超过内容边界（包括填充），并且没有相关的CSS附加到添加填充或未知的图像 - 但是当添加图像时 - 这发生： http://www.optrafair-london.co.uk/page.cfm/Link=25/t=m/

Answer 1

代码表包含的图片大小超过table当您没有明确提及列width时，HTML会将其留给浏览器。当你特别提到width并尝试放置更大尺寸的图像时，HTML表会做出一些重大改变 - 这可能是由于你所面临的更糟糕的。

将HTML元素与正确的CSS进行硬性绑定是一种很好的做法。除此之外，当您设计网页时，您不会在较小的区域中放置大图像。如果，您将搜索stackoverflow徽标，那么您会发现它的大小不同，这就是它的完成方式。

您计算布局的pixel。
将图片转换为大小。
将图像放在适当的位置。

在任何您想要的地方放置任意大小的图像绝不是一个好习惯。

将图像添加到HTML表会破坏表格

1 个答案: