将联系信息HTML代码置入div时缺漏排查问询，可提供配套CSS代码

不需要完全重写代码，优先做针对性排查即可，排查成本远低于整体重写。

第一步：正确插入图片代码 #

你要插入的图片代码本身无语法错误，可直接嵌入到目标div位置，比如你要在现有联系信息列旁新增列放图片，修改后代码如下：

<section id="contact" class="section">
  <!-- Container Starts -->
  <div class="container">

    <!-- Start Row -->
    <div class="row">
      <!-- Start 联系信息列 -->
      <div class="col-lg-6 col-md-12">
        <div class="container">
          <div class="contactinfo">
              <div>
                <h2>Contact Info</h2>
                <ul class="info">
                  <li>
                    <span><img src="img/contact/Email.png"></span>
                    <span>colbration@visionviewplus.com</span>                        
                  </li>
                  <li>
                    <span><img src="img/contact/wechat.png"></span>
                    <span>wechat ID : 212131321</span>                        
                  </li>
                  <li>
                    <span><img src="img/contact/qq.png"></span>
                    <span>QQ ID : 212131321</span>                        
                  </li>
                </ul>
              </div>
          </div>
        </div>
      </div>
      <!-- End 联系信息列 -->
      <!-- 新增图片列 放到这里 -->
      <div class="col-lg-6 col-md-12">
        <div class="img-container">
          <a href="https://i.sstatic.net/MO7F1.jpg" rel="nofollow noreferrer">
            <img src="https://i.sstatic.net/MO7F1.jpg" alt="说明文本">
          </a>
        </div>
      </div>
     
    </div>
    <!-- End Row -->
  </div>
</section>

这里注意你原有代码里的内层Container类名首字母大写，和外层的小写container类名不一致，如果你的CSS样式是针对小写类名写的，这里大小写不匹配会直接导致样式失效，优先修正这个问题。

第二步：常见问题排查点 #

• 图片不显示：检查img标签的src路径是否正确，用网络图片要确保写全完整的https前缀，用本地图片要确认相对路径和实际文件存放位置一致。
• 布局错位：给目标div加临时测试样式border: 1px solid red;，可以直观看到容器的实际占比和位置，快速定位是样式冲突还是结构层级问题。
• 样式不生效：打开浏览器控制台的元素检查面板，选中你插入的图片元素，查看右侧样式列表里有没有被划掉的属性，就能找到是哪个样式被覆盖或者没有生效。

按上面的步骤排查完基本可以解决绝大多数问题，不需要整体重写代码。

内容的提问来源于stack exchange，提问作者Ahmed magdy