在每个div发生的地方放置醉酒

时间:2012-03-01 18:57:15

标签: css tipsy

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

2 个答案:

答案 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%;
}