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

How to get a paragraph to flow after a floated header starting on the last line of the wrapped header

本文关键字：标题 一行 之后 开始 何使段 包装 最后      更新时间：2023-09-26

我有一个只能在移动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解决方案的任何想法？谢谢！

这只能使用 CSS 来完成。也不需要浮动：

section {
  width: 700px;
}
section p {
  padding-left: 200px; 
  margin-top: -20px
}
section h2 {
  padding-right: 500px; 
  margin-bottom:0
}

您的 HTML 保持不变。

相关文章：