Question

我将img与display: block;一起使用，以便将它们一个显示在另一个下面，而第二个则指向一个链接。除了当我将鼠标悬停在第二张图像上时，它还指向链接，即使是正确的空白，该效果也很好。我该如何解决？

img {
    display: block;
}

和

<img src="smiley.gif">
<a href="www.google.com">
    <img src="smiley.gif">
</a>

Answer 1

如果要将图像堆叠在另一个之上，我建议您避免使用<br>标签（如其他答案所建议），而应使用干净的CSS解决方案，例如flexbox的flex-direction属性。

代码：

.parent {
   display: flex;
   flex-direction: column;
}

示例：

.parent {
   display: flex;
   flex-direction: column;
}

img {
   max-width: 5em;
   max-height: 5em;
}

<div class = "parent">
  <img src = "//www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-hi.png"/>
  <a href = "//openclipart.org/download/216413/coniglio_rabbit_small.svg">
    <img src = "//openclipart.org/download/216413/coniglio_rabbit_small.svg"/>
  </a>
</div>

Answer 2

使用<br />元素使它显示在新行上，而不是display: block。

Answer 3

只需将它们放入div标记中，这些标记是块元素，因此将覆盖整个宽度。但是，图像（是内联元素）不会散布在DIV的整个宽度上，因此不会有您描述的不必要的悬停效果：

img {
  vertical-align: top;
}

<div>
  <img src="http://placehold.it/300x200/fa0">
</div>
<div>
  <a href="www.google.com">
    <img src="http://placehold.it/400x150/f0a">
  </a>
</div>

Answer 4

做到这一点

<img src="smiley.gif"><br>
<a href="www.google.com">
    <img src="smiley.gif">
</a>

CSS-带有显示块和href的img

4 个答案: