CSS/HTMLでのテキストの配置と位置合わせ

Question

私はHTMLとCSSを初めて使用しており、単純なテキストの配置と整列に問題があります。私はページの右半分にテキストを置き、テキストをすべての行の最初の文字に沿って縦に並べるようにしています。今、ヘッダーはページの右側にあり、半分は切り取られています。テキストの残りの部分は、お互いの上に積み重ねられていません。むしろ、左に1ブロックのテキストがあり、他の2つは右上に積み重ねられています。私はこれを何時間も悩まされており、位置づけと整列についての記事はすべて読んだが、私はそれを得ることはできない。助けてくれてありがとう！

<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

あなたは私についてのクラスにmargin-left: 50%を追加し、追加した他の位置決めを削除する必要があります。 JSFiddleに

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

リンク：https://jsfiddle.net/dLy932Lh/

EDIT：左側にDIVを追加

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

左右のdivの表示をインラインブロックに設定することが重要です。これにより、同じ行（つまりインライン）となり、高さと幅（したがってブロック）を持つことができます。

左のdivにページの左側にあるコンテンツを置き、幅が50％以下であることを確認します。

このソリューションがうまくいければと思います！