将 div 高度设置为内部 div 位置：绝对结合 CSS3 过渡答案

【问题标题】：Set div height to inner div with position: absolute in combination with CSS3 transitions将 div 高度设置为内部 div 位置：绝对结合 CSS3 过渡
【发布时间】：2014-02-04 04:23:17
【问题描述】：

我用 CSS3 创建了一些图块。在每个 tile div 中，都有一个图像和一些文本。将鼠标悬停在图像上时会显示文本。

可以在this CodePen中看到这些图块。

但是，如您所见，图块会自动采用图块文本的高度，但我希望它们能适应图像的高度。我知道你可以通过设置位置来做到这一点：相对而不是绝对，但是悬停不再起作用了。

有谁知道如何解决这个问题？我真的迷路了，所以不胜感激！

附注不幸的是，我不允许在这个项目中使用 Javascript 或 JQuery。

【问题讨论】：

文本磁贴在悬停约 1 秒后似乎消失了，这是故意的吗？

标签： html css

【解决方案1】：

您的想法是正确的，您只是使某些代码过于复杂，从而导致了冲突。这是您的 codePen 的新版本，它更加简化。 http://codepen.io/anon/pen/mAirH

希望对您有所帮助。

【讨论】：

【解决方案2】：

如果您从#tile-container .tile 中删除overflow: hidden;，那么您将获得正确的高度。但是，您必须调整宽度以弥补溢出的消除。

更新：如果你添加

*{
-webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

那么宽度也可以。

这是一支更新的笔：http://codepen.io/anon/pen/iAubK

【讨论】：