html - 需要帮助解决一个奇怪的 CSS 问题

Question

看看这个网站:http://www.naaf.no/fersking

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

我将文本放在一个 DIV 中，该 DIV float 在另一个 div(图像)上方，不透明度设置为 60%。但是谁能向我解释为什么第一篇文章比其他两个框低大约 5px？第一篇文章与底部对齐 - 它应该高出 5 像素。

这是文本框的 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; 没有呈现你想要的结果(但它表现正确)。

或者:

在 main.css 第 439 行的 #articleImageList img-selector 中删除 min-width。