Question

我是CSS的新手，并在以下方面绞尽脑汁：

我有一行源自数据库查询的图像。我将照片连续显示在一个页面内。例如，如果有20张照片，则会根据页面宽度和照片每行显示5张照片。

我的挑战：我希望将DIV放在每张照片的相同相对位置。此div将包含一个对照片采取操作的链接。所有的动作代码都有效，但在我的生活中，我不能正确定位DIV。

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

想象一张邮票大小的照片。在每个的右上角，是一个包含链接的灰色框。我无法将灰色框始终放在每张照片上相同的相对位置。每张照片大小相同，但由于照片数量不详，我不能简单地“定位：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>

思考？

非常感谢提前。

Answer 1

尝试

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

Answer 2

可能更容易在此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进行偏移（你会看到我已经猜到了上面的金额，但你可以明显调整以适应！）

希望这有帮助！

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

Answer 4

我可能错了，但看起来你正试图重新发明轮子......

查看map元素（HTML4，HTML 5）

CSS新手：在每排照片上放置一个Div

4 个答案: