Храните h-тэг со следующим тэгом p при обертке изображений

В статье Joomla (3.6.5) у меня есть изображение со стилем: float:left, с несколькими заголовками, за которыми следует некоторый простой текст абзаца.Храните h-тэг со следующим тэгом p при обертке изображений

В зависимости от ширины экрана просмотра, которая изменяется много, иногда один из h3 заголовков строк вверх в нижней части, но все еще на право, изображение и следующий абзац под изображение на оставил. (см. макеты)

То, что я пытаюсь достичь, заключается в том, чтобы сохранить h3, заголовок со следующим первым абзацем, таким же образом, как и функция MS Word «держать со следующей».

У меня нет специального CSS для этой статьи, и я не использую ул или ола списки. Существует только одна колонка и одна страница, поэтому page-break-avoid не имеет отношения к делу. Это не проблема с разрывом страницы.

Я попытался обертывание h3 и связанные с р метки в контейнере, но это не имеет никакого значения.

Изображение 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

Спасибо, Нейл. Я не мог заставить это работать. Обертывание отдельных групп h3 и p помеченного текста в контейнеры с float: right (и удаление поплавка изображения: слева) просто бросило эти divs влево - вне области компонента и над соседней боковой панелью. Обертывание всей партии - кроме изображения - в контейнере перемещено все под изображением. Может, я что-то упустил? – 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

Храните h-тэг со следующим тэгом p при обертке изображений

ответ

Смежные вопросы