html - 将容器的内容保持在一起

Question

我试图在每个单词的正上方显示文本中每个单词的定义(定义是否重叠并不重要。稍后我将隐藏所有定义，一次只显示一个。)

问题是一行的最后一个定义和最后一个词不在一起。单词总是在下一行，而定义在上一行。

如何让它们粘在一起？

这是一个 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>

Answer 1

使 .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>