使用Javascript:
<script type="text/javascript">
$(function() { $('.cat_name').tipsy({gravity: 's'}); });
</script>
TPL Smarty:
<div id="content_inside">
<a href="#" title="Test" id="1" class="cat_name">
<div class="box">
</div>
</a>
<a href="#" title="Test2" id="2" class="cat_name">
<div class="box">
</div>
</a>
</div><!-- content end -->
CSS:
#content_inside {
height: 500px;
width: 950px;
padding:5px;
}
.box {
width: 300px;
height: 261px;
padding: 5px;
float: left;
}
.box {
margin: auto;
background: url(../images/box1.jpg) no-repeat top left;
}
我需要在每个div链接的上部中心放置,如何做到这一点?现在看来总是在左侧显示。示例是如何以及如何在img:http://oi43.tinypic.com/adka3t.jpg
中答案 0 :(得分:0)
在tipsy中有一个offset
选项,它们与元素相抵消。
$('.cat_name').tipsy({gravity: 's', offset: 20 });
答案 1 :(得分:-1)
不幸的是,你的float:left导致了不正确地计算偏移量。你能以不同的方式布置你的页面吗?作为一个例子,以下枯燥的旧表格布局似乎复制了您正在寻找的设计,以及工具提示显示在您想要的位置。
HTML:
<div id="content_inside">
<table>
<tr>
<td class="box"><a href="#" title="Test" id="1" class="cat_name">lkjoijkj lj lkj oij oi</a></td>
<td class="box"><a href="#" title="Test 2" id="2" class="cat_name">lkjoijkj lj lkj oij oi</a></td>
</tr>
</table>
</div>
CSS:
#content_inside {
height: 500px;
width: 950px;
padding:5px;
}
.box {
width: 300px;
height: 261px;
padding: 5px;
}
a {
display:block;
height: 100%;
}