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 StackOverflow, as I am having trouble with positioning using floats and figures.</figcaption>
</figure>

我知道这是一个简单的问题，但我无法解决这个问题：/

非常感谢先进。

Answer 1

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

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

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

根据W3School确定定义：

元素相对于其第一个定位（不是静态）祖先元素。

在人类措辞中，无论如何它在其父元素中“浮动”。与Microsoft Word类似，如果您让图片可以随机定位，图片将不再对文字进行处理，因此文字可以包裹图片。

Text-align，而不是允许元素浮动，它与Microsoft Word中的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 StackOverflow, as I am having trouble with positioning in 
  </figcaption>

使用float属性定位figcaptions有困难

2 个答案: