试图浮动右元素并与顶部元素对齐[重复]

【问题标题】：Trying to float right element and aling with top element [duplicate]试图浮动右元素并与顶部元素对齐[重复]
【发布时间】：2021-08-27 07:07:29
【问题描述】：

我正在努力实现以下目标：

但保持特定的 div 结构/层次结构/顺序：

<div>
  <div>
    <h3>TITLE</h3>
    <p>LEGEND</p>
  </div>
  <div>
    <i>BUTTON</i>
  </div>
</div>

尝试使用相对浮动右侧的位置并显示内联，但没有成功。

以下是尝试： https://jsfiddle.net/xzmf8753/

【问题讨论】：

float:left 代表左边，float:right 代表右边
^ 和溢出：自动到容器

标签： html css css-float css-position display

【解决方案1】：

<div style="background-color: red; position: relative">
  <div style="position: relative; display: inline;">
    <h3>TITLE</h3>
    <p style="display: inline;">LEGEND</p>
  </div>
  <div style="position: absolute;top: 0;right: 0;">
    <i>BUTTON</i>
  </div>
</div>

【讨论】：

谢谢，成功了！
@TemaniAfif 该解决方案似乎不适用于这种情况
@RASMiranda 如果您正确应用属性，它会这样做