使用浮动属性定位无形字幕时遇到问题

Question

所以我目前正在构建一个网页，并在图像和两个标题周围使用标签，一个用作标题，另一个用作描述。我想将标题浮动到容器的右侧，同时将描述保留在下一行。但是，当我将标题向右浮动时，描述会向上移动，并与标题在同一行，但标题在右侧，如 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 Whosebug, as I am having trouble with positioning using floats and figures.</figcaption>
</figure>

我知道这是一个简单的问题，但我一辈子都弄不明白:/

非常感谢。

Answer 1

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

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

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

根据W3School的定义：

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

用人类的话说，它 'floats' 无论如何都在其父元素中。类似于Microsoft Word，如果让图片随意定位，图片就不会再垫文字，文字就可以包住图片。

Text-align，而不是让元素浮动，它与Microsoft Words中的text-align一样，align不会改变内容的结构，只是单行（段落）对齐。

Answer 2

您也可以通过将清除权限属性应用于第二个 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 Whosebug, as I am having trouble with positioning in 
  </figcaption>

使用浮动属性定位无形字幕时遇到问题

Having trouble positioning figcaptions using the float property

html

css

css-float

使用浮动 属性 定位无形字幕时遇到问题

Having trouble positioning figcaptions using the float property

html

css

css-float

使用浮动属性定位无形字幕时遇到问题