0

我正在整理一个家谱网站，其中每个页面都有一个家庭的组织流程图，周围是家庭成员的照片。

我正在使用style='position:absolute'左侧和顶部坐标来定位页面上的图片。现在我正在尝试在每张图片的底部添加一个标题，当我将它放置在我想要的位置时，它将与图片保持一致。

我尝试了不同的代码和方法，发现此代码有效，但前提是我删除了 HTML 中的定位代码。一旦我包含了定位，带有标题的框就会回到左上角。图片将被策略性地放置在页面上，所以我需要定位代码。

这是我找到的代码（由 jsFiddle 提供），它在图片周围放置了一个框，并在其下方放置了标题：

CSS：

.image {
  display: inline-block;

  margin: 10px;
  padding: 5px;

  border: 10px solid white;

  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px#888;
  box-shadow: 0 0 5px #888;
}

.image img, .image span {
  display: block;
}

.image span {
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
  font-family: arial;

HTML：

<div class="image">

<a href="Family tree_files/DSRM 2011.jpg">
<img alt="dsrm2011" src="Family tree_files/DSRM 2011.jpg" 
style= "position: absolute; left:100px; top:85px;" width="208" height="461" /></a>'<span class=caption">Doug 2011</span>

有人可以帮我编写代码，以使图片保留在带有标题的框中，我将其放置在哪里？

4

1 回答 1

0

好像您自己在移动图像坐标。尝试使用 ID 制作一个，而不是将位置分配给 div，将图像和标题放在 div 内，它们会和谐地一起移动，如果您需要代码示例，请发表评论！

于 2015-02-22T21:49:45.220 回答