html - float : left not working with text

Question

我正在尝试使用 float:left 使副标题与标题保持在同一行。

但是，当标题换行时，副标题也会换行。

p {
  font-family: Montserrat;
  font-size: 24px;
  margin: 0px;
  padding: 0px;
  line-height: 100%;
  float: left;
}
.other {
  font-size: 14px;
  font-family: Montserrat;
  padding: 0px;
  margin: 0px;
  position: relative;
  top: 3px;
  color: #ff442b;
}

<p><b>Title goes here.&nbsp;</b>
</p>
<p class="other">Subtitle</p>
<br>
<br>
<br>
<div>
  <p><b>Title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here.&nbsp;</b>
  </p>
  <p class="other">Subtitle</p>
</div>

Answer 1

您可以删除 float 并在 p 标签上使用 display: inline:

https://jsfiddle.net/eueuo8kk/

(但是你应该使用类而不是 p 标签，否则这将应用于页面上的每个 p 标签)

P.S.:我还从字幕规则中删除了 position: relative。使它们沿基线对齐。