包装图像时，将h标签与下一个p标签保持一致

Question

在Joomla（3.6.5）文章中，我有一个样式为float:left的图像，其中包含几个 h3 标题，每个标题后面跟着一些简单的段落文本。

根据观看屏幕的宽度变化很大，有时其中一个 h3 标题排在图像的底部，但仍然在图像的右侧，下面的段落在下面左边的图像。 （见模型）

我想要达到的目的是将 h3 标题保留为以下第一段，其方式与MS Word的“保持下一个”功能相同。

我没有这篇文章的特殊CSS，也没有使用 ul 或 ol 列表。只有一列和一页，因此 page-break-avoid 不相关。这不是分页符问题。

我尝试在容器中包装 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

通过将var fields = [{value: "Claims", OrderId:3 }, {value: "Requests", OrderId:1 }, {value: "Access", OrderId: 2}] var listElements = fields.sort('OrderId', function(n){ return Math.sin(n) } ) .map( function(field) { return React.createElement('li', {}, React.createElement('h2',{}, field.value) ) }) var rootElement = React.createElement('div', {}, React.createElement('ul', {}, listElements) ) ReactDOM.render(rootElement, document.getElementById('container')); 和关联的<h3>标记包装在容器中，您正朝着正确的方向前进，但不是将图像浮动，而是将这些容器向右浮动。

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>