Возникли проблемы с позиционированием figcaptions с использованием свойства float

Question

Итак, в настоящее время я создаю веб-страницу и использую тег вокруг изображения и двух подписей, один служит заголовком, а другой - описанием.Я хочу переместить заголовок справа от контейнера, сохранив описание на следующей строке.Однако, когда я перемещаю заголовок вправо, описание перемещается вверх и находится на той же строке, что и заголовок, но с заголовком справа, как показано в этом jsfiddle https://jsfiddle.net/k5cxg6n2. Как сохранитьописание в отдельной строке, без использования
или чего-либо в этом роде, и просто CSS?

Я также скопировал html из jsfiddle ниже.

<figure>
    <figcaption style="float:right">Title</figcaption>
    <figcaption>This is an example line that I am using to ask my question on StackOverflow, as I am having trouble with positioning using floats and figures.</figcaption>
</figure>

Я знаю этоэто простая проблема, но я не могу понять это для моей жизни: /

Большое спасибо в продвинутом.

Answer 1

Вы также можете добиться этого, применив свойство clear right ко второму figcaption, как показано ниже:

 <figcaption style="float:right">Title</figcaption>
 <figcaption style="clear:right">
    This is an example line that I am using to ask my question on StackOverflow, as I am having trouble with positioning in 
  </figcaption>

Answer 2

Вместо этого используйте style="text-align:right".

Float буквально означает что-то плавающее в окне, без какой-либо привязки.Где это связанная позиция.

float: right = position: absolute + right: 0px

Согласно определению из W3School :

Элемент позиционируется относительно своего первого позиционированного (не статического) элемента-предка.

В человеческом языке он все равно «плавает» в своем родительском элементе.Как и в Microsoft Word, если вы разрешите случайному расположению картинки, картинка больше не будет вставлять слова в слова и, таким образом, слова могут переносить картинку.

Выравнивание текста, вместо того, чтобы позволить элементу плавать, оноточно так же, как выравнивание текста в Microsoft Words, выравнивание не изменит структуру содержимого, а только выравнивание по одной строке (абзацу).