时间戳

首页 > 解决方案 > CSS：将标题定位在内容的左侧

html - CSS：将标题定位在内容的左侧

问题描述

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

在此处输入图像描述

我尝试使用以下 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>

标签： htmlcss

解决方案

这是你需要的吗？

您必须将标题和内容包含在浮动的 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>

推荐阅读