在每个缩略图上放置一个 div？答案

【问题标题】：position a div over each thumbnail?在每个缩略图上放置一个 div？
【发布时间】：2015-12-31 14:22:18
【问题描述】：

我有许多缩略图，我想使用 CSS 在每个缩略图的右下方显示一个 div，以显示有关图像的更多信息。我怎么做？不为这种静态行为寻找 javascript。

我基本上有一个内容网格（缩略图），我希望该网格中的每个单元格都与第二个单元格相关联，该单元格浮动在它上面。

对于该类信息 div，我尝试使用“位置：绝对”，但您不能指定相对于缩略图的位置，只能指定其上方的块容器。我不能让我的缩略图全部“显示：块”，因为这会为每个缩略图强制换行并且它们不能一起流动。我不能把缩略图放到表格中，因为 tds 不是“显示：块”，所以“位置：绝对”只能相对于表格，而不是每个单元格。使 tds "display: block" 强制每个 td 换行。制作容器“display:block”和“float:left”也会让“position:absolute”忽略它们。

我是否必须放置一个类似 style="left: 129px; top: 536px;" 的属性在这些 div 中的每一个中？

【问题讨论】：

你能给我们看一些 html/css 吗？例子？

标签： html css

【解决方案1】：

你在找这样的东西吗

https://jsfiddle.net/fpygeokn/

.image-wrapper {
  height: 250px;
  width: 300px;
  background: red;
  position: relative;
}
.image-wrapper img {
  max-width: 100%;
  max-height: 100%;
}
.image-describe {
  position: absolute;
  width: 100%;
  background: blue;
  bottom: 0;
  height: 30px;
  color: white;
}

<div class="image-wrapper">
  <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
  <div class="image-describe">
    This is a desciption
  </div>
</div>

【讨论】：

...是的。要是我在写自己问题的答案时看到了你的答案就好了。
您需要查看的最重要方面是父级具有relative 位置，子文本包装器具有absolute 位置

【解决方案2】：

哦，呵呵。对不起，我忘了这正是“显示：内联块”的用途。我的 CSS 最终是这样的：

.thumb {
    position: relative;
    display: inline-block;
}

.thumb img {
    width: 11.25vw;
}

.thumb span.taghi {
    position: absolute;
    left: 9vw;
    top: 9vw;
    width: 1vw;
    background-color: rgba(200,100,255,0.3);
    display: inline;
}

粗略的 HTML 是：

<div id="thumbs">
  <div class="thumb">
    <span class="taghi" title="someinfo">(?)</span>
    <a href=...><img src=.../></div>
  <div class="thumb">etc...

当您使用“display: inline-block”时，它会被视为其中任何“position: absolute”元素的块元素，同时像内联元素一样流动。

【讨论】：