如何不使用绝对定位将两个按钮对齐到textarea右侧

实现方案（Flex布局，无绝对定位） #

Flex布局完全匹配你的需求，所有元素都保留在正常文档流内，后续调整元素尺寸无需修改定位参数，维护成本极低。

完整代码示例

<!-- 外层容器控制整体排版 -->
<div class="editor-wrapper">
  <!-- 左侧内容区域，直接替换为你的textarea或img即可 -->
  <textarea rows="12" cols="60"></textarea>
  <!-- 右侧按钮组容器 -->
  <div class="btn-group">
    <button>clear</button>
    <button>go</button>
  </div>
</div>

<style>
.editor-wrapper {
  display: flex;
  /* 子元素顶部对齐，匹配示例图效果 */
  align-items: flex-start;
  /* 控制textarea和按钮的水平间距，可自行调整 */
  gap: 10px;
  /* 可选：如果需要容器撑满父级宽度，按钮贴最右侧，加上下面这行 */
  /* justify-content: space-between; */
}
.btn-group {
  display: flex;
  flex-direction: column;
  /* 控制两个按钮的垂直间距，可自行调整 */
  gap: 6px;
}
</style>

问题原因说明

你之前的代码没有外层排版容器，行内/行内块元素在总宽度超过父级宽度时会自动换行到下一行，就会出现按钮掉到图片/textarea下方的问题。用Flex外层容器强制子元素水平排列后就可以解决这个问题。

内容的提问来源于stack exchange，提问作者chowder