Question

将图像插入我的模板后，页面下方的一组框似乎与模板的其余部分不同步，我对此感到困惑。我曾尝试弄乱某些填充和边距，似乎无法保持图像的正确对齐。

守则

<div id="SuperContentsWrapper">
  <div id="SuperContents">
    <div id="SuperContentsSub">
      <h1>
        <div align="center">
          <font color="#A35E41"><em><font color="#000000">Batman Vs Superman Boys' T-Shirt</font></em></strong></font>
        </div>
      </h1>
    <p>
    <div align="center"> <img src="http://nutty-squirrel.co.uk/Kieran%20Completed%20SKU%20/Batman%20Test.png?" height="100%" width="100%">
      <p>
      <div align="center">
        <font size="3">Great for all occasions, this Batman Boys T-Shirt will receive a great reception anywhere. This T-Shirt looks and feels great and is made with 100% innovative SofSpun Cotton and has a longer-line for a more fashionable looking T-Shirt.</font>
      </div> 
      <p> </p>
      <div align="center">Brand: Fruit Of The Loom </div>

导致此问题的图片是：<div align="center"> <img src="http://nutty-squirrel.co.uk/Kieran%20Completed%20SKU%20/Batman%20Test.png?" height="100%" width="100%">

如果还有更多代码需要了解为什么会发生这种情况，请告诉我。

Answer 1

要在评论中扩展我的答案，图片后面缺少关闭</div>标记意味着浏览器引擎会将未关闭<div>之后的所有内容呈现在<div>内直到找到匹配的结束标记，这将导致其上的整个视觉布局受损。

导致其他物体移动的图像

1 个答案: