css - 当html文档中有多个图像时如何定位图像

Question

好的，我正在创建一个网站，在我的一个页面上有几张图片，正如您从下面的代码中看到的那样，它们都有 img 标签。我知道你需要让不同的图像独一无二，这样它们就不会都遵循相同的 css 标签，但我正在努力让我的工作发挥作用，因为它们都遵循“img”css 标签，我无法解决问题。同样由于某种原因，图像最终出现在页脚中，即使没有任何 css，它仍然留在那里。

HTML代码

<h4>Download CV</h4>
      ˚<p> If you want to see my full resume please click the link below and enjoy!</p>
        <a download="Curriculum Vitae RWP.docx" href="../Curriculum Vitae RWP.docx" title="R**** A*** CV">
        <div class ="imagelist" id = "imagelist" > 
        <img class="imagelist" alt="CV" src="../Images/cv.png" width ="150" height="150" />
        </a>

CSS 代码

imagelist{
margin-left:500px;
}

img{
float:none;
margin-top: 50px;
margin-left: 20px;
}

Answer 1

你可能想关闭你的 div.imagelist

<h4>Download CV</h4>
<p> If you want to see my full resume please click the link below and enjoy!</p>
<a download="Curriculum Vitae RWP.docx" href="../Curriculum Vitae RWP.docx" title="R**** A*** CV">
  <div class ="imagelist" id = "imagelist" > 
    <img class="imagelist" alt="CV" src="../Images/cv.png" width ="150" height="150" />
  </div>
</a>

此外，在您的 img 上使用与其父级相同的类不会使您的样式最终变得很好。我建议从 img 标签中删除该类，并使用以下 css 定位图像列表中的图像:

.imagelist img {}

对于当前的css，你忘了在imagelist前面加一个点

希望这对您有所帮助，让您继续前进。