html - CSS |在 标签后放置 div

Question

我正在尝试添加 this tooltip在 p 标签的文本结束之后。

在此示例中，工具提示在我将鼠标悬停时显示图像:

<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 像素而您的 p 元素为 150 像素，则您需要一个大于 450 像素的容器。解决方案是使用包装器将这两个元素包装起来 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 .