javascript - 如何让段落在 float 标题之后从包装标题的最后一行开始流动

Question

我有一个只能在移动版 Safari 中查看的页面。我正在尝试实现某种效果以匹配打印出版物。我已经非常接近了，但这是最后一个细节。

在我的页面中，我有这样的 HTML 标记:

<section>
  <h2>Header</h2>

  <p>A long paragraph...</p>
</section>

像这样的 CSS 样式:

section {
  padding-left: 200px;
  width: 700px;
}

h2 {
  float: left;
  width: 180px;
  margin-left: -200px;
}

结果是这样的:

Header          A long paragraph, blah blah blah...
                blah blah blah...

这是完美的。但是，如果标题中的内容稍长一些，则可能如下所示:

This is a       A long paragraph, blah blah blah...
longer header   blah blah blah...

而我希望它做的是在标题的最后一行开始段落，如下所示:

This is a
longer header   A long paragraph, blah blah blah...
                blah blah blah...

我想我可以使用 JavaScript 来解决这个问题，但我想以尽可能少的干扰方式来修复它，要么纯粹使用 CSS，要么对标记进行最少的更改。除此之外，关于 JavaScript 解决方案的任何想法？谢谢!

Answer 1

这只能使用 CSS 来完成。也不需要 float :

section {
  width: 700px;
}

section p {
  padding-left: 200px; 
  margin-top: -20px
}

section h2 {
  padding-right: 500px; 
  margin-bottom:0
}

您的 HTML 保持不变。