天气数据布局：如何实现同一行div元素的左右独立对齐？

我在开发天气数据展示功能时，已经把湿度与最低温、风速与最高温分别放在同一行，效果如下：

但尝试让最低温、最高温右对齐，湿度、风速左对齐时，达不到预期效果。以下是我的实现代码：

CSS 代码 #

.extra_info_1,
.extra_info_2 {
  text-align: left;
}

.min_temp,
.max_temp {
  display: inline;
  text-align: right;
}

.humidity,
.wind {
  display: inline;
}

HTML 代码 #

<div class="extra_info_1">
  <div class="humidity">Humidity: N/A</div>
  <div class="min_temp">N/A</div>
  <br>
</div>

<div class="extra_info_2">
  <div class="wind">Wind speed: N/A</div>
  <div class="max_temp">N/A</div>
</div>

JS 代码（供参考） #

document.querySelector(".min_temp").innerText = "Min temp: " + temp_min + "°C";
document.querySelector(".max_temp").innerText = "Max temp: " + temp_max + "°C";

document.querySelector(".feels_like").innerText = "Feels like: " + feels_like + "°C" 
document.querySelector(".humidity").innerText = "Humidity: " + humidity + "%";

原代码失效核心原因：inline 元素无法单独生效 text-align 属性，且容器没有做合理布局规划，无法实现两端对齐。推荐两种可行方案：

方案一：Flexbox 布局（优先推荐） #

Flexbox 是现代前端最简洁的布局方案，能快速实现两端对齐效果：

调整后的 CSS：

.extra_info_1,
.extra_info_2 {
  display: flex;
  justify-content: space-between; /* 核心：实现左右两端对齐 */
  margin-bottom: 8px; /* 可选：给两行之间添加间距，优化视觉 */
}

/* 无需再设置 display: inline，Flex 子元素默认以 flex-item 形式存在 */

HTML 可简化（移除多余的 <br>）：

<div class="extra_info_1">
  <div class="humidity">Humidity: N/A</div>
  <div class="min_temp">N/A</div>
</div>

<div class="extra_info_2">
  <div class="wind">Wind speed: N/A</div>
  <div class="max_temp">N/A</div>
</div>

方案二：浮动布局（兼容旧浏览器） #

如果需要兼容不支持 Flexbox 的老旧浏览器，可采用浮动+清除浮动的方式：

调整后的 CSS：

.extra_info_1,
.extra_info_2 {
  overflow: hidden; /* 清除浮动，避免容器高度塌陷 */
  margin-bottom: 8px;
}

.humidity,
.wind {
  float: left; /* 左侧元素左对齐 */
}

.min_temp,
.max_temp {
  float: right; /* 右侧温度值右对齐 */
}

HTML 保持原结构即可，无需设置 display: inline。

两种方案都能实现你要的：左侧文本左对齐、右侧温度值右对齐的布局效果，优先推荐 Flexbox，代码更简洁易维护。

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