Question

我正在尝试在p标记文本完成后添加this tooltip。

在此示例中，工具提示在我悬停时显示图像：

<p>This is some text in a paragraph.</p> 
<div class="help-tip">
    <p><img src="balloon.jpg" width="300" /></p>
</div>

我怎么能在“这是段落中的某些文字”段落后对齐.help-tip？

此致

Answer 1

首先，你的元素不对齐，因为img包含一个 p 标记，它会自动更改该行。

<p>This is some text in a paragraph.</p> 
<div class="help-tip">
    <img src="balloon.jpg" width="300" />
</div>

要解决此问题，您必须记住，您的容器必须能够包含这两个元素。因此，如果您的 img 宽度为300 px且 p 元素为150px，则需要一个大于450px的容器。解决方案是使用包装器 div 并在css中添加内联显示。

HTML

<div class="wrapper">
    <span class="foo">This is some text in a paragraph.</span> 
    <div class="help-tip">
         <img src="balloon.jpg" width="300" />
    </div>
</div>

CSS

.foo{
 width:150px;
 positition:relative;
}
.wrapper{
     width:550px;
     positition:relative;
}
.help-tip{
    display:inline;   
}

更新

这不起作用，因为段落文本包含在 p 元素中，默认情况下它会低于此值。如果您必须使用 p 元素，则可以使用position:absolute将图片对齐，或使用 span 而不是 p 并使用this jsFiddle。

Answer 2

编辑更好的代码：

CSS：

.help-tip {
    /* remove following css: */
    position: absolute;
    top: 18px;
    right: 18px;
    /* add following css: */
    display: inline-block;
    position: relative;
}

HTML：

<p>This is some text in a paragraph.</p>
<div class="help-tip">
    <p><img src="balloon.jpg" width="300" /></p>
</div>

其他以前的方法：

.help-tip {
    /* remove following css: */
    position: absolute;
    top: 18px;
    right: 18px;
    /* add following css: */
    float: left;
    margin: -2px 10px;
}
p {
    /* add following css: */
    float: left;
}

CSS |在<p>标签</p>之后放置div

2 个答案:

HTML

CSS

更新