使用 CSS“display:inline”时换行

我已经成功获得了<p>跟随一个<h>在同一行，但是我想在新行重复这一点，但下一个<h>是继上一个之后的<p>- 我应该怎么办？

我尝试过各种“清除”选项，但没有一个破坏内联。我真的不想用<br>或者有一个空的<p>，不太高兴被包围<div> either.

注意 - 我已尝试删除inline从第二个<h>元素，虽然这确实放置了<h>在新行中，以下内容<p>最终也出现在它自己的新线路上。

CSS

.inline {display: inline;}

.newline {clear: left;}

HTML

<h5 class="inline">Heading:</h5>

<p class="inline">Some text.</p>

<h5 class="inline newline">Next Heading:</h5>

<p class="inline">Some more text.</p>

这是我想要达到的结果：

Heading:一些文字。

下一个标题更多文字。

但我得到的是这个：

Heading:一些文字。下一个标题更多文字。

任何建议 - 尝试使代码尽可能简单和整洁。

[Update]

目前我将按照 hafid2com 的建议添加一个空 div，使用以下内容（只需添加高度即可达到所需的结果）：

.clear { clear: both; display: block; content: ""; width: 100%; }

<div class="clear"></div>

如小提琴所示：http://jsfiddle.net/rxAnk/5/ http://jsfiddle.net/rxAnk/5/

添加这个：

HTML:

<h5 class="inline">Heading:</h5>

<p class="inline">Some text.</p>

<div class="clear"></div>

<h5 class="inline">Next Heading:</h5>

<p class="inline">Some more text.</p>

CSS:

.inline {display: inline;}

.clear{
  clear: both;
  display: block;  
  content: "";
  width: 100%;  
}