我是一个非常新的（参见：大约一周）CSS用户试图做一些我认为非常简单的事情。我正在尝试（在一段文字中）发布一个帮助图标的图像，当您将鼠标悬停在图标上时会显示更多信息。
我在使div正确对齐方面遇到了一些问题。我希望包含图片的div仅在您将鼠标悬停在帮助图标本身时触发，而不是将其悬停在整个行上。在我的代码上（虽然不完全是在jsfiddle中），我可以通过绝对定位来做到这一点，但是当你使用悬停时，这会导致它下面的文本重叠。如果我以任何其他方式定位它，它不会重叠，但它不适合图片。它又回到了整条生产线上。
有没有办法让div都适合其内容（一个小的~25x25帮助图标），然后导致下面的悬停不重叠它下面的内容？我试着把它放在css上。
http://jsfiddle.net/YbGE6/＆lt; ---非常基本的jsfiddle格式。
<div id = "Big">
<div id = "one"> "Hover" <div id="two"> "Hover text" </div></div></div>
答案 0 :(得分：0)
使用帮助图标更改div的CSS以包含display: inline-block;，这将使其适合其内容。 div默认为display: block;，它横跨整条线。不要绝对定位div，使用默认静态位置，并将float放在任何您想要的位置。文本将围绕它流动，当帮助div的大小在悬停时发生变化时，它会将文本推到一边，文本将在其周围回流。
以下是float的一些文档：https://developer.mozilla.org/en-US/docs/Web/CSS/float