CSS：在同一行上左對齊和右對齊文本

Question

Stack Overflow 有問題詢問如何在 1 行上左對齊和右對齊文本。 我找不到適用於多行文本的答案。

---

如何在環繞多行的一段文本中右對齊內聯元素在其自己的行上？ 當內聯元素在一行的中間時，它應該跳過文本並位於當前行的末尾。

示例代碼：

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing
    <span class="lil-green"></span>
    elit. Pellentesque in vestibulum purus, et pharetra tellus. Etiam et ague tortor.
    <span class="lil-red"></span>
</p>

簡單模型

即使調整文本容器元素的大小，該解決方案也應該有效。

Answer 1

這正是float屬性的用途。 在該元素的規則內使用float: right 。 您可以在MDN 的文章中了解有關float屬性的更多信息

right

元素必須浮動在其包含塊的右側。

Float 使文本環繞圖像或其他元素。