在每个 div 出现的地方放置醉酒答案

【问题标题】：Place tipsy in place where every div occure在每个 div 出现的地方放置醉酒
【发布时间】：2012-03-01 18:57:15
【问题描述】：

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

【问题讨论】：

onehackoranother.com/projects/jquery/tipsy

标签： css tipsy

【解决方案1】：

tipsy 中有一个offset 选项，与元素有偏移。

$('.cat_name').tipsy({gravity: 's', offset: 20 });

【讨论】：

你不太明白问题是什么 :)，偏移是一回事，让醉意出现在我的 div 上是我似乎无法锻炼。
@Cameleon，所以您需要将其显示在左侧框的左侧，并在中间框的中心显示。我说的对吗？

【解决方案2】：

不幸的是，您的 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%;
}

【讨论】：