将div放在未知高度的div下

Question

我的HTML代码是这样的：

<div class="content">
<h1>heading</h1>
<p>sample text</p>
</div>

<div class="nav-bar">
nav links
</div>

我想要＆＃34;导航栏＆＃34; div位于标题下方的右侧。标题是未知的高度，因为它可能会溢出到另一条线上，并且段落可以是任何高度。

如果不改变HTML，这可能是CSS还是你必须使用JavaScript？我知道这可以通过位置完成：如果标题是已知高度，则为绝对值，但如果标题高度可以为任何高度则不行。

Answer 1

您可以将它们放在容器内，然后根据需要对齐它们。 这也取决于content是否100％宽。

Answer 2

不改变HTML：https://jsfiddle.net/53fa57ye/1/

预计标题下不会有多个段落元素。

.nav-bar {
  float: right;
}

h1 + p {
  position: absolute;
}

这种方法的问题是，该段落不会有任何实际高度，所以如果你的内容低于它，就会出现问题。

如果你真的不能影响标题＆amp; p HTML，我会选择一些CSS＆amp; JavaScript：https://jsfiddle.net/53fa57ye/4/