Плавающий элемент в верхнем правом углу контейнера

Question

У меня есть HTML-файл, который я не могу редактировать.

<section> 
    <h2>Section heading</h2> 
    <p>Paragraph text</p> 
    <img src="image.jpg" /> 
</section> 

Дизайн просят фото, чтобы быть в верхней правой части раздела, который легко, если изображение является верхней детской секции. К сожалению, изображение в поставляемом HTML находится прямо в нижней части раздела в HTML, поэтому простое плавающее право не будет работать. С небольшой работой я выяснил, как абсолютное положение div, сохраняя его в потоке страницы, создавая поток с помощью другого плавающего элемента.

* { 
    box-sizing: border-box; 
} 
section { 
    position: relative; 
    outline: 1px solid #CCC; 
} 

div { 
    display: inline-block; 
    width: 140px; 
    height: 140px; 
    background-color: green; 
    border-radius: 100px; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

h2::before { 
    content: ""; 
    display: inline-block; 
    float: right; 
    width: 150px; 
    height: 150px; 
    outline: 1px solid red; 
} 

h2 { 
    outline: 1px solid blue; 
} 

См https://jsfiddle.net/tnxhy0po/3/

• Div - Используя его, чтобы продемонстрировать изображение в скрипку.
• Красный контур - Правый плавающий :: до элемента pesudo для Заголовок.
• Синий контур - Контур заголовка.
• Серебряный контур - раздел контур.

Теперь о проблеме. В заголовке содержатся слова «Встреча с владельцем, Джули», а Джули должна быть отдельной строкой. Если я ограничу ширину заголовка, чтобы сделать это, плавающий элемент-разделитель будет содержаться в ширине заголовка, а это означает, что текст под ним не течет до изображения.

См https://jsfiddle.net/s7eke1gy/16/

Я не уверен, как сделать поплавок изображение в правом верхнем углу секции. Размещение его легко, но сделать его частью потока нет.

В качестве альтернативы, текущее решение по положению + абсолютное положение будет работать, если бы я мог найти способ получить «Джулию» для перехода к следующей строке.

Редактировать: Во время тестирования я установил секцию максимальной ширины и забыл ее удалить. Ширина секции динамическая и как таковая 100%. Я удалил свойство max-width из раздела здесь и в jsfiddles. Извините за беспорядок!

Answer 1

Если я вас правильно понял, вы хотите поставить Жюли на отдельной строке и оставить текст плавая как на https://jsfiddle.net/tnxhy0po/1/

Вы можете попробовать комбинировать до и после того, как псевдо-элементов, использование: перед тем, чтобы обернуть h2 (переместите Джулию в новую строку) и: после того, как обернуть абзац.

h2::before { 
    content: ""; 
    display: inline-block; 
    float: right; 
    width: 150px; 
    height: 25px; 
    outline: 1px solid red; 
} 
h2::after { 
    content: ""; 
    display: inline-block; 
    float: right; 
    width: 10px; 
    height: 120px; 
    outline: 1px solid red; 
} 

Вы можете увидеть результат на https://jsfiddle.net/s7eke1gy/13/ Надежда Я вас понимаю, и это может помочь.