ラップされたヘッダーの最後の行から始まるフローティングヘッダーの後に段落を移動する方法

Question

モバイルSafariでのみ表示されるページがあります。私は印刷物の出版物にマッチするために一定の効果を達成しようとしています。私は本当に近づいてきましたが、この最後の詳細についてはわかりました。このような

<section> 
    <h2>Header</h2> 

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

とCSSのスタイル：：

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

です：

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

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

結果はこのようなものである私のページで

私はこのようなHTMLマークアップを持っています完璧。

：私はそれがやりたいことは、このように、ヘッダーの最後の行に段落を開始しているのに対し

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はそのままです。