Question

我试图在我的图像底部附加一个div而没有空格。但是，以下代码不能满足我的要求。除此之外，当我沿着div h2的宽度悬停时，会出现单击按钮，表示它可以在此空白区域中单击。我觉得我已经尝试了将黑色div和图像连接在一起的所有内容，并使它们都可以点击而不会出现故障或只用一个锚标记。如果你能帮助我，我会非常感激。

这是我目前的HTML代码：

<div style="#">
    <a style="max-width: 280px;" href="#">
        <img src="../Images/7.JPG" style="height: 200px; width: 280px; border-radius: 10px 10px 0 0;">          
        <div style="background-color: black; width: 280px; height: 30px; border-radius: 0 0 10px 10px;">
            <h2 style="color: white; font-weight: bold; text-align: center; padding-top: 2px;">Bees</h2>
        </div>
    </a>
</div>

提前致谢！

Answer 1

使用此规则，它是由初始边界h2

引起的

<div style="max-width: 280px; overflow:hidden;" style="#">
    <a style="max-width: 280px;" href="#">
        <img src="../Images/7.JPG" style="height: 200px; width: 280px; border-radius: 10px 10px 0 0; display: block;">          
        <div style="background-color: black; width: 280px; height: 30px; border-radius: 0 0 10px 10px;">
            <h2 style="color: white; margin:0px; font-weight: bold; text-align: center; padding-top: 2px;">Bees</h2>
        </div>
    </a>
</div>

这里有一个fiddle

Answer 2

这里有一些事情可以发挥作用。

由于可折叠的边距，您的<h2>溢出了父级。将边距设置为0以修复它。

<a>或主<div>需要display:inline-block才能达到100％的宽度。

最后，不要使用内联样式。使用<style>标记或style.css并添加一些类和ID。

a{
  max-width: 280px;
  display: inline-block;
}

img{
  height: 200px;
  width: 280px;
  border-radius: 10px 10px 0 0;
  display: block;
}

h2{
  color: white;
  font-weight: bold;
  text-align: center;
  padding-top: 2px;
  margin: 0;
}

a div{
  background-color: black;
  width: 280px;
  height: 30px;
  border-radius: 0 0 10px 10px;
}

<div>
    <a href="#">
      <img src="https://placeimg.com/280/200/any">
      <div>
        <h2>Bees</h2>
      </div>
    </a>
</div>

div之间的不寻常差距，以及锚标记错误

2 个答案: