イメージをラッピングするときに次のpタグでhタグを保持する

Question

Joomla（3.6.5）の記事では、スタイルがfloat:leftで、いくつかのプレーンな段落テキストが続くh3見出しがある画像があります。時々、の下部にH3見出しラインアップのいずれかを多くの変化が、それでもの右画像と次の段落に視聴画面の幅に応じて

は、上の画像の下にあります左。

h3は、次の第1段落の見出しを、MS Wordの「次と一緒に続ける」機能と同じ方法で保つことです。

私はこの記事のために特別なCSSを持っていないとULまたはオールリストを使用していません。 1列と1ページしかないので、ページ区切りは関係ありません。これは改ページの問題ではありません。

私はH3をラップしようとした容器にPタグを関連するが、それは違いはありませんしています。

画像1：

画像2を包む現在のテキスト：私が達成したいと思っていますテキストの折り返し「の次に保つ」：それは価値がある何のため

は、コードだけです：

<h3 style="margin-top: 0; line-height: 30px;"> 
    <img src="images/image-file.jpg" alt="alt text" style="margin-right: 15px; margin-bottom: 5px; float: left;" />h3 heading 
</h3> 
<p>Some text<br />Some more text</p> 
<h3>Another h3 heading</h3> 
<p>The quick brown fox jumps over the lazy dog</p> 
</h3> 
<h3>Third h3 heading</h3> 
<p>Last bit of text. Would like to keep previous h3 heading with this first line when wrapping around images</p> 

感謝の意を表します。

Answer 1

<h3>と関連する<p>タグをコンテナにラップすることによって正しい方向に向かっていますが、イメージをフローティングにするのではなく、これらのコンテナを正しくフロートさせます。

Answer 2

メディアクエリで解決できます。これは一般的な解決策ではありませんが、このようなインラインCSSを使用するとできます。

<style> 
@media (max-width: "500px"){ //Change it accordingly, whenever that break between h3 and p occurs 
h3.yourclass{clear: left;} //Assign a class to that h3 or select it with nth-child selector 
} 
</style> 

の