Question

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

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

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

我是否必须输入类似style =“left：129px; top：536px;”的属性在这些div中的每一个？

Answer 1

你在寻找像这样的东西

https://jsfiddle.net/fpygeokn/

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

哦，呃。对不起，我忘了这正是“display：inline-block”的用途。我的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”元素的块元素，同时像内联元素一样流动。

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

2 个答案: