浮动：不使用文本

Question

我正在尝试使用float:left使字幕与标题位于同一行。

但是，当标题分为新行时，副标题也会转到新行。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

https://jsfiddle.net/eueuo8kk/

（但您应该使用类而不是p标记，否则这将适用于页面上的每个p标记。

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