父div浮点干扰子div的宽度
父div浮点干扰子div的宽度
提问于 2011-08-31 01:44:35
我正在尝试做的是有一个非常简单的工具提示，隐藏/显示在悬停使用jQuery。
(jsFiddle demo of the problem)
要做到这一点，我所做的是在li的上放置一个div，它将有一个工具提示。这个div绝对位于每个li的顶部。工具提示div将包含不同长度的文本，因此我不能预先定义它的宽度。我只想让宽度根据文本的长度一直延伸。
我的问题是，当我浮动li时，div也被浮动(至少看起来是这样)，因此获得了被浮动li的宽度。工具提示现在变得与li的宽度一样窄，这是我不喜欢发生的。
这是HTML：
<ul id="images">
<li><img src="[some image]" /><div class="tooltip">Some text that is quite long.</div></li>
<li><div class="tooltip">Some text that is quite small.</div><img src="[some image]" /></li>
<li><img src="[some image]" /></li>
<li><img src="[some image]" /></li>
</ul>这是CSS：
#images li {
list-style: none;
margin-left: 10px;
position: relative;
}
.tooltip {
color: #FFF;
clear: both;
background: #000;
padding: 10px;
font: 11px Arial, Helvetica, sans-serif;
-moz-border-radius: 5px;
position: absolute;
top: -50px;
display: none;
border: 2px solid #999;
}我希望有人能帮我解决这个问题。
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-08-31 02:13:50
你可以在之前计算出确切的宽度。
例如，在页面外部创建一个工具提示div，如下所示
<div class="tooltip" id="calc"></div>和
#calc{
top:-100px;
left:-100px;
}如果添加以下js，它将很好地显示出来
$(".tooltip","#images").each(function(){
$("#calc").text($(this).text());
$(this).width($("#calc").width());
});更新的fiddle here
Stack Overflow用户
发布于 2011-08-31 02:11:51
块元素扩展到其容器的宽度。Float不会改变这一点。
如果您希望在工具顶部使用不同的宽度，请使用width并以像素为单位指定宽度。
如果你想走一条更漂亮的路线，你可以定义宽度和高度，检查溢出，并使用JavaScript将其加宽。
Stack Overflow用户
发布于 2011-08-31 02:51:17
我认为你需要改变一下你的方法！您可以在具有绝对位置的div中使用它的HTML内容，而不是使用与实际工具提示相同的div，并根据悬停对象的位置设置它的位置。
$('#images li').hover(function() {
$('#myTooltip').html($(this).find('.tooltip').html());
/* Here you need to set #myTooltip absolute position.
based on the position of $('this') or the mouse position
with an offset */
}, function() {
$('#myTooltip').hide();
});其中#myTooltip是在列表外部定义的具有绝对位置的div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7247485
复制相关文章
相似问题
腾讯云开发者
