Leerzeichen im vertikalen Rahmen links

Question

Das aktuelle Beispiel verwendet eine Pseudo-Klasse, um eine Linie mit kleinen Elementen für Haupttitel und Untertiteln zu zeichnen. Jedes Element mit einer Klasse line benötigt eine Zeile auf der linken Seite.

Problem: Ich muss die Höhe auf 200% erhöhen, damit es funktioniert. Wenn der Inhalt vergrößert wird, dehnt sich diese Zeile weiter aus als sie sollte.

Sobald der Inhalt zunimmt, erstreckt sich die Zeitleiste weiter: https://jsfiddle.net/ss189uva/

Gibt es eine Möglichkeit, dies durch jquery der Umsetzung? Dies muss flexibel genug sein, um Inhaltsbereichen zu widerstehen und sich automatisch anzupassen.

Original-Beispiel:

p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.view-timeline-block { 
 
    padding: 0 5em; 
 
    line-height: 28px; 
 
} 
 
.view-timeline-block .ml-container { 
 
    padding-left: 25px; 
 
} 
 
.view-timeline-block .line { 
 
    position: relative; 
 
} 
 
.view-timeline-block .line:after { 
 
    background: black none repeat scroll 0 0; 
 
    content: ""; 
 
    height: 200%; 
 
    left: -19px; 
 
    position: absolute; 
 
    top: -15px; 
 
    width: 5px; 
 
} 
 
.view-timeline-block .active { 
 
    position: relative; 
 
} 
 
.view-timeline-block .active:after { 
 
    background-color: white; 
 
    border: 5px solid black; 
 
    border-radius: 50%; 
 
    content: ""; 
 
    height: 8px; 
 
    left: -25px; 
 
    position: absolute; 
 
    top: 6px; 
 
    width: 8px; 
 
    z-index: 100; 
 
} 
 
.view-timeline-block .active-small { 
 
    position: relative; 
 
} 
 
.view-timeline-block .active-small:after { 
 
    background: black none repeat scroll 0 0; 
 
    border-radius: 50%; 
 
    content: ""; 
 
    height: 12px; 
 
    left: -23px; 
 
    position: absolute; 
 
    top: 9px; 
 
    width: 12px; 
 
}

<div class="view-timeline-block"> 
 
    <div class="main-listing"> 
 
    <div class="title active">Testing name</div> 
 
    <div class="content line"> 
 
     <p>testing name content</p> 
 
    </div> 
 
    <div class="sub_name active-small">asdasdasdasd</div> 
 
    <div class="sub_content line"> 
 
     <p>testing sub name content</p> 
 
    </div> 
 
    </div> 
 
    <div class="main-listing"> 
 
    <div class="title active">Timeline 2 name</div> 
 
    <div class="content line"> 
 
     <p>timeline 2 content</p> 
 
    </div> 
 
    <div class="sub_name active-small">Timeline 2 sub name</div> 
 
    <div class="sub_content "> 
 
     <p>timeline 2 sub content</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

auslassen Nur height insgesamt und geben Sie mindestens zwei (2) Positionseigenschaften für die Dimension entgegen Sie festlegen möchten: https://jsfiddle.net/ss189uva/2/

.view-timeline-block .line:after { 
    background: black none repeat scroll 0 0; 
    content: ""; 
    left: -19px; 
    position: absolute; 
    top: -15px; 
    bottom: -15px; 
    width: 5px; 
} 

Dies nutzt die Tatsache, dass absolute ly positionierte Elemente Dimension gegeben werden kann, wenn genügend Eigenschaften angegeben werden:

Von MDN's documentation for position:

Die meiste Zeit, absolut positionierten Elemente auto Werte von height und width berechnet, um den Inhalt des Elements anzupassen. Nicht ersetzte, absolut positionierte Elemente können jedoch so gemacht werden, dass sie den verfügbaren Platz füllen, indem sie (.) sowohl top als auch bottom angeben und height unspezifiziert lassen (d. H.). Ebenso für left, right und width.

von top: -15px; und bottom: -15px; Angabe und height als auto verlassen, sind Sie, dass das obere Ende der Pseudo des Pseudo -15px von oben und dass der Boden ist -15px von unten ist zu gewährleisten; die Höhe des Elements geben oder nehmen 15px.