Question

我在我的图片上设置了一些悬停字幕，他们过去工作得很好。我转移了一些东西，为侧边栏（这是一个wordpress网站）腾出空间，从那以后我无法弄清楚为什么我在标题上有额外的40px！我已经尝试在WP和CSS中更改图像的最大宽度和固定宽度值。我也试过改变定位和填充，但仍然没有。以下相关CSS：

http://jsfiddle.net/P3ERh/

字幕只占据了可用宽度的100％，因为它们包含在帖子中，它们应该占据帖子的宽度吗？我将其定义为最大宽度和最大高度为300px。

/* portfolio structure */

.portfoliowrapper .portfoliopost {
    box-sizing: border-box;
    width: calc(50% - 10px);
    padding: 10px 0px;
}

.portfoliopost .post {
    padding: 10px 0px;
}

.portfoliowrapper .portfoliopost.left {
    float: left;
}

.portfoliowrapper .portfoliopost.right {
    float: right;
}

.post-thumb {
    position: relative; 
}

.portfoliopost img {
    max-width: 300px;
    max-height: 300px;
    width: 100%;
    padding: 0;
}

/* end portfolio structure */

/* caption structure */

.caption {
    bottom: 0;
    position: absolute;
    width: 100%;
    max-width: 300px;
    height: 100%;
    max-height: 300px;
    z-index: 1000;
    transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
}

.caption p {
    padding: 20px 10px;
    float: left;
    position: absolute;
}

.caption p {
    bottom: 25px;
}

.caption p:last-child {
    bottom: 0;
}

Answer 1

我是否理解您希望标题包含在.portfoliopost img中，但它是否会扩展到其中？

您可能需要将position:relative;添加到.portfoliopost img。

编辑：

我对你的小提琴做了一些改动。还是有点乱：

.post-thumb {
position: relative; 
max-width: 300px; /* Added */
}

.portfoliopost img {
/* max-width: 300px;*/
max-height: 300px;
width: 100%;
padding: 0;
}

/* end portfolio structure */

/* caption structure */

.caption {
bottom: 0;
position: absolute;
width: 100%;
/*max-width: 300px;*/
height: 100%;
/* max-height: 300px;*/
z-index: 1000;
transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-webkit-transition: opacity 0.25s;
}

更新了小提琴：http://jsfiddle.net/P3ERh/2/

Answer 2

如果您希望通过绝对定位将图片放在图像上，则必须使用相对位置设置容器元素，因此它可以作为基础。否则，它将使用其他父元素作为基础，并将流浪。

基本上我刚补充说：

.post-thumb { position: relative; }

到CSS。请在此处查看：http://jsfiddle.net/gBz99/

请下次放入渲染的html，而不是php + html，这样我们就可以轻松地将它放在codepen / jsbin / jsfiddle / other中，看看你看到了什么，遇到了麻烦。我不得不替换并假设你的代码中的一些东西试图解决你的问题，因为在读杰克的答案之前我无法理解你的问题。

此外，您可以使用浏览器的开发人员工具调试此问题。检查元素并查看它的盒子模型和计算值，这样你就会知道出了什么问题以及它来自哪里。

出于某种原因，我的悬停字幕有额外的宽度和高度？

2 个答案: