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

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 来完成。也不需要浮动：

section {
  width: 700px;
}

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

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

您的 HTML 保持不变。