我正在组建一个家谱网站,其中每个页面都有一个家庭组织图片所围绕的组织流程图。
我正在使用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>
有人可以帮我编码一下,以便图片保留在带有标题的框中吗?
答案 0 :(得分:0)
看起来你自己正在移动图像坐标。尝试使用ID制作一个ID,然后将位置分配到div,将图像和标题放在div中,它们将和谐地一起移动,如果需要代码示例则进行注释!