在包裝圖像時保留帶有下一個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標籤

回答

相關問題