如何实现div内left-text居左、right-text居右的布局？

你给.text-div设置了display: flex，但同时给子元素添加了float属性——flex容器会直接忽略子元素的float声明，所以两个span作为flex item会默认挤在容器左侧，导致文本连在一起显示。

方案1：基于Flex布局实现（推荐，契合现有代码结构） #

既然已经用了flex布局，直接用flex的属性就能实现左右对齐，不需要依赖float：

1. 给.text-div添加justify-content: space-between，让两个元素分别靠向容器左右两端，中间自动填充空白空间
2. 可以移除.left-text和.right-text里的float属性（留着也不会生效，建议清理冗余代码）

修改后的CSS代码：

.left-text{
    text-align: left; /* 保留文本左对齐，可选 */
}

.right-text {
    text-align: right; /* 保留文本右对齐，可选 */
}

.text-div {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 新增关键属性 */
}

方案2：基于Float布局实现（放弃Flex） #

如果坚持用float布局，需要调整.text-div的样式，移除flex相关设置，同时确保容器能正确包裹浮动元素：

.left-text{
    float: left;
    text-align: left;
}

.right-text {
    float: right;
    text-align: right;
}

.text-div {
    /* 移除display:flex和align-items:center */
    overflow: hidden; /* 触发BFC，确保容器包裹住浮动元素 */
}

• 方案1更符合现代前端布局规范，flex布局在处理对齐、垂直居中这类需求时更简洁，你已经设置的align-items: center还能保留，确保文本垂直居中
• 方案2是传统的浮动布局写法，适合需要兼容非常老旧浏览器的场景，但逻辑相对繁琐

内容的提问来源于stack exchange，提问作者program.exe