コンテナの内容をまとめる

Question

私は各単語の上にあるテキストのすべての単語の定義を表示しようとしています（定義が重なっても問題ありません）。

問題は、行の最後の定義と最後の単語が一緒に留まらないということです。定義は前の行にとどまり、単語は常に次の行に進みます。

どうやって貼り合わせるのですか？ここで

はフィドルです：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ことを確認します。また、相対/絶対的な関係は、以下の私のスニペットのように変更する必要がある、と私はまた、代わりにその親のpタグにline-height絶対的要素のbottom設定を調整し、割り当てられた：

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

を