vertikale Linie mit Text um

Question

brauche ich so etwas wie dies zu tun:

eine vertikale Linie mit Text auf der linken und auf der rechten Seite.

sah ich How to make a vertical line in HTML

ich aber über eine vertikale Linie zu machen und dann border-left verwenden und border-right

Aber ich sehe nicht, wie es in pratic zu tun.

Answer 1

Ich habe ein sehr einfaches Beispiel, könnten Sie die #content Regel für die Größe, die Sie benötigen, zu ändern haben:

HTML

<div id="content"> 
    <div id="text"> 
     <div class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
     <div class="txt-r">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
     <div class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   </div> 
    </div> 
    <div id="vline"></div> 
</div> 

CSS

body{ 
    margin: 0; 
} 
.txt{ 
    margin-left: 5%; 
} 
.txt-r{ 
    margin-left: 55%; 
} 
.txt-r, .txt { 
    width: 40%; 
    margin-top: 1%; 
    border-style: solid; 
} 
#text{ 
    position: absolute; 
} 
#vline{ 
    position: absolute; 
    border-left: thick solid #000000; 
    margin-left: 50%; 
    height: 100%; 
} 
#content{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

JSFIDDLE