0

我有一个缩略图画廊。在每张图片下方，我显示缩略图标题：

<div class='gallery'>
  <div class='thumb'>
    <div class='thumbimage'></div>
    <div class='thumbtitle'></div>
  </div>
  <div class='thumb'>
    <div class='thumbimage'></div>
    <div class='thumbtitle'></div>
  </div>
</div>

缩略图在网格中向左浮动：

.thumb {
  float: left;
}

缩略图被缩短以适合一行：

.thumbtitle {
  line-height: 1.25em;
  min-height: 1.25em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

当用户将鼠标悬停在缩略图上时，缩写的缩略图将替换为完整的缩略图：

.thumb:hover .thumbtitle {
  height: auto;
  line-height: 1.25em;
  white-space: normal;
}

如果完整的缩略图不适合一行，则悬停的缩略图框会向下扩展以容纳完整的标题。

这是我的问题：

当悬停的缩略图向下扩展时，下方的缩略图会向右移动以避开它。这不是我想要的行为。我希望扩展的缩略图与下面的缩略图重叠，而不是推开。也就是说，我希望悬停的缩略图框向下扩展而不会导致任何其他缩略图移动。

这可能吗？

4

1 回答 1

1

你可以添加

.thumbtitle {
    position:absolute;
}

为了从文档流中删除它们，并且

.thumb {
    position:relative;
}

.thumbtitle相对于 定位.thumb。

这样你也可以添加

.thumbtitle {
    max-width:100%; /* or width:100% */
}

最后，添加

.thumb:hover .thumbtitle {
    z-index:1;
}

使其与以下元素重叠。

演示：http: //jsfiddle.net/ANvvR/

于 2012-09-24T01:41:30.427 回答