CSS：位置标题位于内容左侧

Question

我正在尝试将标头对齐到内容的左侧（见下文）。

我尝试使用以下CSS做到这一点：

h4{
    font-family: 'Cera GR Medium', Fallback, sans-serif !important;
    font-size: .75rem;
    color: #F38181;
    letter-spacing: .2rem;
    text-align: right;
    margin-right: 100px;
    width: 200px;
    float:left;
}

p{
    float:right;
    font-weight: 300;
    font-size: 1rem;
    width: 100%;
    max-width: 650px;
}

此结果具有以下布局：

“技能”标题出现在p元素结束之前，并且标题间距似乎独立于p元素。

HTML代码：

<h4>BACKGROUND</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nibh egestas, consequat dui ac, sagittis dolor. Suspendisse
  mollis ipsum ac orci vulputate interdum. Etiam id laoreet ligula. Sed nec est maximus, lobortis urna sit amet, molestie
  purus. Donec tristique tempus quam, in cursus erat lacinia ut. Duis tempor justo et pharetra laoreet. Phasellus maximus,
  nunc lobortis ultrices maximus, purus justo bibendum erat, ut tincidunt elit urna eu purus. Donec at mauris pretium, pulvinar
  mi at, pretium velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ut nulla eu justo </p>
<h4>SKILLS</h4>

Answer 1

这是您需要的吗？

您必须将标题和内容包含在同样浮动的div中。

h4{
    font-family: 'Cera GR Medium', Fallback, sans-serif !important;
    font-size: .75rem;
    color: #F38181;
    letter-spacing: .2rem;
    text-align: right;
  height:auto;
    width: 19%;
    float:left;
  border:none;
}

p{
    float:right;
    font-weight: 300;
    font-size: 1rem;
    width: 80%;
border:none;
}

<div style='float:left'><h4>BACKGROUND</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nibh egestas, consequat dui ac, sagittis dolor. Suspendisse
  mollis ipsum ac orci vulputate interdum. Etiam id laoreet ligula. Sed nec est maximus, lobortis urna sit amet, molestie
  purus. Donec tristique tempus quam, in cursus erat lacinia ut. Duis tempor justo et pharetra laoreet. Phasellus maximus,
  nunc lobortis ultrices maximus, purus justo bibendum erat, ut tincidunt elit urna eu purus. Donec at mauris pretium, pulvinar
  mi at, pretium velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ut nulla eu justo </p>
</div>

<div style='float:left'>
  <h4>SKILLS</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nibh egestas, consequat dui ac, sagittis dolor. Suspendisse
  mollis ipsum ac orci vulputate interdum. Etiam id laoreet ligula. Sed nec est maximus, lobortis urna sit amet, molestie
  purus. Donec tristique tempus quam, in cursus erat lacinia ut. Duis tempor justo et pharetra laoreet. Phasellus maximus,
  nunc lobortis ultrices maximus, purus justo bibendum erat, ut tincidunt elit urna eu purus. Donec at mauris pretium, pulvinar
  mi at, pretium velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ut nulla eu justo </p></div>

Answer 2

div{width:100%}
h4{
    font-family: 'Cera GR Medium', Fallback, sans-serif !important;
    font-size: .75rem;
    color: #F38181;
    letter-spacing: .2rem;
    text-align: right;
    margin-right: 100px;
    width:30%;
    float:left;
}

p{
    float:right;
    font-weight: 300;
    font-size: 1rem;
    width: 70%;
}

<div>
<h4>BACKGROUND</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nibh egestas, consequat dui ac, sagittis dolor. Suspendisse
  mollis ipsum ac orci vulputate interdum. Etiam id laoreet ligula. Sed nec est maximus, lobortis urna sit amet, molestie
  purus. Donec tristique tempus quam, in cursus erat lacinia ut. Duis tempor justo et pharetra laoreet. Phasellus maximus,
  nunc lobortis ultrices maximus, purus justo bibendum erat, ut tincidunt elit urna eu purus. Donec at mauris pretium, pulvinar
  mi at, pretium velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ut nulla eu justo </p>
 </div> 
<div>
    <h4>SKILLS</h4>
</div>