Inhalt eines Containers zusammenhalten

Ich versuche, für jedes Wort in einem Text direkt über jedem Wort eine Definition anzuzeigen (es spielt keine Rolle, ob sich die Definitionen überschneiden. Später werde ich alle Definitionen ausblenden und nur eins anzeigen eine Zeit.)Inhalt eines Containers zusammenhalten

Das Problem ist, dass die letzte Definition und das letzte Wort einer Zeile nicht zusammen bleiben. Das Wort geht immer in die nächste Zeile, während die Definition in der vorherigen Zeile bleibt.

Wie bringe ich sie zusammen?

Hier ist eine Geige: 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>

Quelle

2017-06-02 CamelCase

Uhm, was ist das Problem? Es scheint unnötig unordentlich, aber es funktioniert wie erwartet. – Michelangelo

Eigentlich nicht. Wenn es über mehr als eine Zeile geht, wird das letzte Paar von Definition und Wort getrennt. Aber das macht nichts. Ich habe bereits eine Antwort :) – CamelCase

Make .paircontainer ein inline-block sein. Auch sollten die relativen/absoluten Beziehungen geändert werden wie in meinem Snippet unten, und ich auch die bottom Einstellung der absoluten Elemente eingestellt und zugewiesen, um die line-height zum p-Tag statt seinen Eltern:

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

Quelle

2017-06-02 13:41:34 Johannes

Vielen Dank! Genau das habe ich gebraucht. Und so schnell :) – CamelCase

Inhalt eines Containers zusammenhalten

Antwort

Verwandte Themen