保持容器的内容在一起

时间:2017-06-02 13:24:21

标签: html css

我正在尝试为每个单词正上方的文本中的每个单词显示一个定义(如果定义重叠则无关紧要。稍后我将隐藏所有定义并且一次只显示一个定义。)

问题是一行的最后一个定义和最后一个单词不能保持在一起。当定义保留在前一行时,该字始终在下一行。

如何让它们粘在一起?

这是一个小提琴: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>

1 个答案:

答案 0 :(得分:0)

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