html - 使用 float 属性定位无形字幕时遇到问题

Question

所以我目前正在构建一个网页，并在图像和两个标题周围使用标签，一个用作标题，另一个用作描述。我想将标题 float 到容器的右侧，同时将描述保留在下一行。但是，当我将标题向右浮动时，描述会向上移动，并与标题在同一行，但标题在右侧，如 jsfiddle https://jsfiddle.net/k5cxg6n2 所示。 .如何在不使用
或任何类似的东西，而只使用 CSS 的情况下，将描述放在单独的行中？

我还从下面的 jsfiddle 中复制了 html。

<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

改用 style="text-align:right"。

Float 字面意思是漂浮在窗口上的东西，没有任何 anchor 。这是相关职位。

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

根据W3School的定义:

The element is positioned relative to its first positioned (notstatic) ancestor element.

用人类的话说，它无论如何都“漂浮”在它的父元素中。类似于Microsoft Word，如果让图片随意放置，图片就不会再垫文字，文字就可以包裹图片。

Text-align，不是让元素 float ，它和Microsoft Words中的text-align一样，align不会改变内容的结构，只是单行(段落)对齐。