需要帮助解决奇怪的CSS问题

Question

在这个网站上取得成功：http://www.naaf.no/fersking

如果将鼠标悬停在三个文章框上，您将看到文本和图像都发生了变化。

我将文本放在DIV中，浮动在另一个div（图像）之上，不透明度设置为60％。但有人可以向我解释为什么第一篇文章比其他两个盒子低约5px？第一篇文章与底部对齐 - 它应该高出5px。

这是文本框的CSS：

#articleImageList .introText {
  background-color:#000000;
  color:#FFFFFF;
  height:50px;
  margin:0 2px;
  opacity:0.6;
  overflow:hidden;
  padding:5px 20px;
  position:relative;
  top:-75px;
  z-index:0;
}

Answer 1

使所有图片的大小相同。调整/upload/Ferskingen/COLOURBOX1021676.jpg（第一篇文章框中的图像）的大小，使其为440x239px（与其他图像一样，为430x239 atm）。

图像使div.articleImage高于其他两个因此使position: relative; bottom: -75px;无法呈现您想要的结果（但它表现正确）。

或者：

在min-width第439行的#articleImageList img - 选择器中移除main.css。