CSS 新手：在每行照片上放置一个 Div答案

【问题标题】：CSS Newbie: Position a Div over Each of a Row of PhotosCSS 新手：在每行照片上放置一个 Div
【发布时间】：2011-05-19 05:37:55
【问题描述】：

我是 CSS 新手，我在以下问题上绞尽脑汁：

我有一排来自数据库查询的图像。我将照片显示在一页内。例如，如果有 20 张照片，它将根据页面宽度和照片每行显示 5 张。

我的挑战：我想在每张照片的相同相对位置放置一个 DIV。此 div 将包含一个链接以对照片执行操作。所有的操作代码都在工作，但我终其一生都无法正确定位 DIV。

我无法发布我正在尝试实现的模型的图像（我太新了），但这里有一个描述：

想象一排邮票大小的照片。在每个的右上角，是一个包含链接的灰色框。我无法在每张照片上始终将灰色框定位在相同的相对位置。每张照片大小相同，但由于照片数量未知，我不能简单地“position:abosulte;”手动操作框。

我的 HTML 大致如下：我已经简化了循环；它是来自 ColdFusion 的不确定数量照片的查询转储。

<LOOP>

    <div id="photo" style="display:inline;"><img src="abc"></div>
    <div id="redBox" style="????"><a href="javascript:action(photo);">ACTION</a></div>

</LOOP>

想法？

提前非常感谢。

【问题讨论】：

顺便说一句：一个 id 在文档中必须是唯一的，所以你不能在循环中使用它
+1 for @harpax 为“photo”和“redBox”使用class 属性
@harpax，你是对的；实际的 DIV ID 是相对于查询行的。

标签： css layout html

【解决方案1】：

在这个 div 中添加你的盒子可能更容易，比如：

<div id="photo" style="display:inline;">
<div id="redBox" style="position:relative;top:-10px;left:-10px"><a    href="javascript:action(photo);">ACTION</a></div>
<img src="abc">
</div>

然后您可以根据需要使用 position:relative 进行偏移（您会看到我已经猜到了上面的数量，但您显然可以调整以适应！）

希望这会有所帮助！

【讨论】：

注意 - simshaun 下面的回复是更好的代码，故意让您的代码尽可能相似，以便您理解，但如果可以的话，肯定会尝试理解他的！

【解决方案2】：

试试

<style>
#photo {
    display: inline-block;
    position: relative;
}
.action {
    /* Optional */
    background: #CCC;
    color: #FFF;
    padding: 2px 3px;
    /* Necessary */
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}
</style>

<div id="photo">
    <div class="action">Foo</div>
    <img src="abc">
</div>

【讨论】：

关闭，但是#photo div也必须是inline-block，否则里面就没有img的尺寸了。
啊。学到了新东西！：）谢谢。可惜你不能投票给 cmets。

【解决方案3】：

也许你可以将它全部包装在另一个 div 中？

<LOOP>
    <div class="container" style="display: inline-block;">
        <div class="photo"><img src="abc"></div>
        <div class="redBox" style="position:relative; top: -20px; right; 10px;"><a href="javascript:action(photo);">ACTION</a></div>
    </div>
</LOOP>

【讨论】：

【解决方案4】：

我可能是错的，但看起来你正在尝试重新发明轮子......

查看map 元素（HTML4、HTML 5）

【讨论】：