html - 将 html 圆圈放在 div 和段落标记旁边

Question

我有这个 html 代码，它由一个圆形和 2 个文本 div 和 p 标签组成。我想要完成的就像下面这张图片。我尝试在我的圈子以及我的 h1 和 p 中添加一个内联 block ，但它最终处于一个奇怪的位置。我不确定我的做法是否正确。任何帮助将不胜感激。

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #16444d;
  display: inline-block;
}

h1 {
  font-weight: 700;
  color: #053740;
  font-size: 30px;
}

p {
  font-size: 18px;
  color: #919191;
}

.header-step {
  display: table;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
}

<div class="header-step ">
  <div class="circle">1</div>
  <div style="display:inline-block;">
    <h1>Some very very long header</h1>
    <p>He determined to drop his litigation with the monastry, and relinguish his claims to the wood-cuting<br> and fishery rihgts at once. He was the more ready to do this becuase the rights had becom much less valuable,<br> and he had indeed the vaguest
      idea where the wood and river in quedtion were.</p>
  </div>
</div>

Answer 1

您可以使用 CSS Flexbox 来做到这一点。

这里我添加了 display: flex 到容器 .header-step 和 flex-shrink: 0 到 .circle 以确保其保持其形状。

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #16444d;
  display: block;
  margin-right: 1em;
  flex-shrink: 0;
}

h1 {
  margin-top: 0;
  font-weight: 700;
  color: #053740;
  font-size: 30px;
}

p {
  font-size: 18px;
  color: #919191;
}

.header-step {
  display: flex;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
}

<div class="header-step ">
  <div class="circle">1</div>
  <div style="display:inline-block;">
    <h1>Some very very long header</h1>
    <p>He determined to drop his litigation with the monastry, and relinguish his claims to the wood-cuting<br> and fishery rihgts at once. He was the more ready to do this becuase the rights had becom much less valuable,<br> and he had indeed the vaguest
      idea where the wood and river in quedtion were.</p>
  </div>
</div>