Positionieren und Ausrichten von Text in CSS/HTML

Question

Ich bin neu in HTML und CSS und habe Probleme beim Positionieren und Ausrichten von einfachem Text. Ich versuche, den Text auf die rechte Hälfte der Seite zu setzen und den Text vertikal entlang des ersten Buchstabens jeder Zeile zu positionieren. Gerade jetzt ist der Header auf der rechten Seite der Seite, halb abgeschnitten. Der Rest des restlichen Textes ist nicht übereinander gestapelt. Stattdessen befindet sich auf der linken Seite ein Textblock, während die anderen beiden auf der rechten Seite übereinander liegen. Ich stehe seit Stunden darauf und habe jeden Artikel über Positionierung und Ausrichtung gelesen, aber ich kann es nicht verstehen. Danke für die Hilfe!

<div class="aboutme"><h3 id="hello">Header</h3></div> 
 
<div class="aboutme"><p id="school">text</p> 
 
</div> 
 
<div class="aboutme"><p id="personal"> 
 
    text</p> 
 
</div> 
 
<div class="aboutme"><p id="thanks"> 
 
    text</p> 
 
</div>

.aboutme > *{ 
 
font-family: Avenir Next; 
 
display: inline-block; 
 
text-align:left; 
 
float:left; 
 
margin: 0.5em 0.5em 0.5em 0.5em; 
 
position:relative; 
 
left:4em; 
 
} 
 

 
#hello{ 
 
font-size: 3em; 
 
color: #282828; 
 
right: 3.47em; 
 
font-weight: lighter; 
 
position:relative; 
 
text-align: left; 
 
float: right; 
 
margin: 1em 1em 0em 1em; 
 

 
} 
 

 
#school { 
 
width: 30em; 
 
clear:right; 
 
} 
 

 
#personal { 
 
width: 30em; 
 
clear:right; 
 
} 
 
#thanks { 
 
width: 30em; 
 
clear:right; 
 
}

Answer 1

Sie müssen margin-left: 50% auf die von mir Klasse hinzufügen und löschen Sie die anderen positionieren Sie hinzugefügt haben.

.aboutme > *{ 
 
font-family: Avenir Next; 
 
display: block; 
 
margin-left: 50% 
 
} 
 

 
#hello{ 
 
font-size: 3em; 
 
color: #282828; 
 
font-weight: lighter; 
 

 
} 
 

 
#school { 
 
width: 30em; 
 
} 
 

 
#personal { 
 
width: 30em; 
 
} 
 
#thanks { 
 
width: 30em; 
 
}

<div class="aboutme"><h3 id="hello">Header</h3></div> 
 
<div class="aboutme"><p id="school">text</p> 
 
</div> 
 
<div class="aboutme"><p id="personal"> 
 
    text</p> 
 
</div> 
 
<div class="aboutme"><p id="thanks"> 
 
    text</p> 
 
</div>

Link zu JSFiddle: https://jsfiddle.net/dLy932Lh/

EDIT: ein div auf der linken Seite Hinzufügen

#leftHalf { 
 
    display: inline-block; 
 
    width: 50%; 
 
    height: 200px; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#rightHalf { 
 
    display: inline-block; 
 
    width: calc(50% - 10px); 
 
    height: auto; 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #FFF; 
 
} 
 
.aboutme > *{ 
 
font-family: Avenir Next; 
 
display: block; 
 
} 
 

 
#hello{ 
 
font-size: 3em; 
 
color: #282828; 
 
font-weight: lighter; 
 

 
} 
 

 
#school { 
 
width: 30em; 
 
} 
 

 
#personal { 
 
width: 30em; 
 
} 
 
#thanks { 
 
width: 30em; 
 
}

<div id="container"> 
 
    <div id="leftHalf"> 
 

 
    </div> 
 

 
    <div id="rightHalf"> 
 
    <div class="aboutme"> 
 
     <h3 id="hello">Header</h3> 
 
    </div> 
 
    <div class="aboutme"><p id="school">text</p> 
 
    </div> 
 
    <div class="aboutme"> 
 
     <p id="personal">text</p> 
 
    </div> 
 
    <div class="aboutme"> 
 
     <p id="thanks">text</p> 
 
    </div> 
 
    </div> 
 
</div>

Es ist wichtig, dass die Anzeige inline-block für die linken und rechten divs ist, so dass sie beide auf der gleichen Linie (daher die Inline) sein können und sie können Höhen und Breiten (daher der Block) haben.

Setzen Sie den gewünschten Inhalt auf die linke Seite der Seite im linken Teil und stellen Sie sicher, dass die Breite nicht mehr als 50% beträgt.

Ich hoffe, diese Lösung funktioniert für Sie!