我试图在每个单词的正上方显示文本中每个单词的定义(定义是否重叠并不重要。稍后我将隐藏所有定义,一次只显示一个。)
问题是一行的最后一个定义和最后一个词不在一起。单词总是在下一行,而定义在上一行。
如何让它们粘在一起?
这是一个 fiddle :https://jsfiddle.net/fiddledidi/vtub581m/
body .paircontainer {
position: relative;
}
.def {
position: absolute;
bottom: 3.75em;
}
.def span {
position: absolute;
display: block;
}
<div style="line-height: 375%">
<p>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
</p>
最佳答案
使 .paircontainer
成为一个 inline-block
。此外,相对/绝对关系应该像下面的代码片段那样改变,我还调整了绝对元素的 bottom
设置并将 line-height
分配给 p
标签而不是它的父标签:
.x {
line-height: 375%;
}
.paircontainer{
position: relative;
display: inline-block;
}
.def {
position: absolute;
bottom: 1.2em;
}
<div>
<p class="x">
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
<span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span> <span class="paircontainer">
<span class="def">
<span>Definition
</span>
</span>
<span>Word
</span>
</span>
</p>
关于html - 将容器的内容保持在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44330072/