在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

您需要将margin-left: 50%添加到a​​bout me class并删除已添加的其他位置。

.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的内联块非常重要，这样它们可以在同一条线上（因此是内联线），并且它们可以具有高度和宽度（因此块）。 / p>

将您想要的任何内容放在页面左侧的左侧div中，并确保其宽度不超过50％。

我希望这个解决方案适合你！