如何用单个div实现无float的右定位左对齐且宽度适配最长子元素？

这几个要求其实用基础的CSS就能轻松满足，我给你两种实用的方案，你可以根据场景选择：

方案一：绝对定位法（脱离文档流） #

这种方案不需要依赖父元素的布局设置，仅靠目标div自身的CSS就能实现所有要求：

.container {
  position: absolute;
  right: 0;
  /* 内容左对齐是浏览器默认的text-align: left，所以无需额外设置 */
}

为什么满足所有条件： #

• 仅用单个div：没错，只需要这一个容器div
• 不使用float：完全没用到float属性
• 容器整体向右定位：position: absolute + right: 0 让容器紧贴父容器（默认是视口）的右侧
• 容器内内容左对齐：默认的text-align: left让内容自然左对齐
• 容器宽度匹配最长子元素：绝对定位的元素默认宽度由内部内容撑开，刚好适配最长子元素的宽度

方案二：Flex布局法（不脱离文档流） #

如果你不想让容器脱离文档流，可以借助父元素的Flex布局（比如把body作为父容器），同样不需要额外的div元素：

/* 父容器（比如body）的样式 */
body {
  display: flex;
}

/* 目标容器div的样式 */
.container {
  margin-left: auto;
  /* 内容左对齐依然是默认值，无需额外设置 */
}

为什么满足所有条件： #

• 仅用单个div：只需要目标容器这一个div，父容器用默认的body即可
• 不使用float：全程用Flex布局，没碰float
• 容器整体向右定位：margin-left: auto会让Flex项自动推到父容器的右侧
• 容器内内容左对齐：默认的文本对齐方式就是左对齐
• 容器宽度匹配最长子元素：Flex项默认宽度由内容决定，刚好贴合最长子元素的宽度

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