在包装图像时保留带有下一个p标签的h标签

在一个Joomla（3.6.5）文章中，我有一个图像样式：float:left，其中几个h3标题，每个标题后跟一些简单的段落文本。在包装图像时保留带有下一个p标签的h标签

根据不同的观看屏幕宽度，有时候其中一个标题排列在图像的底部，但仍然在图像的右侧，而下一个段落位于图像下方剩下。（请参见模型）

我想要实现的目标是保持h3的标题与以下第一段的方式与MS Word的“保持下一个”功能相同。

我对这篇文章没有特别的CSS，也没有使用ul或ol列表。只有一列和一页，因此页面中断避免是不相关的。这不是一个分页问题。

我试图包裹H3和容器中的相关p标签，但没什么区别。

图片1：当前文本换行 Image 1: current text wrapping

图片2：“保持与下一个”文字环绕我想要实现： Image 2: the 'keep with next' text wrap I am wanting to achieve

对于它的价值，代码就是：

<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>

任何建议感激地收到。

来源

2017-01-26 Gillian

的可能的复制[CSS和打印：保持文本块一起（http://stackoverflow.com/questions/2051788/css-and-printing-keep-block-of-text-together） – scoopzilla

我不认为它是重复的，因为它不是一个分页问题。 – Gillian

通过将<h3>和相关联的<p>标签包装在容器中，您正朝着正确的方向前进，但不是将图像浮动到左侧，而是将这些容器浮动到正确位置。

来源

2017-01-26 22:53:15

谢谢，尼尔。我无法得到这个工作。实际上，使用float：right（并移除图像的float：left）将单独的h3和p标记文本组合包装到容器中，只是将这些div放到左侧 - 在组件区域之外并在相邻侧栏上。将整幅图像 - 除了图像之外 - 包装在一个容器中，将图像中的所有内容都移除了。也许我错过了什么？ – Gillian

它可以通过媒体查询来解决。这不是一个通用的解决方案，但是你可以用一个内联的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>

来源

2017-01-27 02:59:14

谢谢，我尝试了大约100个不同的最大宽度后，终于到达了那里。然而，我做了，删除像素周围的双引号，因为我的Joomla css在这种情况下不使用它们。正如你所说，这不是一个通用的解决方案，因为它将取决于每次使用的图像的宽度，但它实现了我所寻找的。（我给你一个积极的投票，但由于我的声望很低，所以没有显示）。 – Gillian

在包装图像时保留带有下一个p标签的h标签

回答

相关问题