在CSS / HTML中定位和对齐文本

Question

我是HTML和CSS的新手，在定位和对齐简单文本时遇到麻烦。 我正在尝试将文本放在页面的右半部分，并使文本沿每行的第一个字母垂直排列。 现在，页眉一直在页面的右侧，一半被截断。 其余文本中的其余部分并未相互堆叠。 相反，在左侧有一个文本块，而在右侧则是其他两个文本堆叠在一起。 我已经在这个问题上停留了几个小时，并且已经阅读了有关定位和对齐的每篇文章，但是我似乎无法理解。 谢谢您的帮助！

 <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

您需要在about me类中添加margin-left: 50% ，并删除您添加的其他位置。

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

链接到JSFiddle： https ://jsfiddle.net/dLy932Lh/

编辑：将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％。

希望此解决方案对您有用！