我将天气数据、湿度和风速分别设置在同一条线上，分别作为min-和max-和temps，见下图：
然而，我试着将温度调整到右边，湿度和风速调整到左边，但似乎没有让我。
.extra_info_1,
.extra_info_2 {
text-align: left;
}
.min_temp,
.max_temp {
display: inline;
text-align: right;
}
.humidity,
.wind {
display: inline;
}<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 + "%";
1条答案
按热度按时间polhcujo1#
如果您想将两个项目对齐到div的两侧，您可以使用CSS Flexbox，或者更具体地说，使用Flexbox的justify-content属性。
正如你所看到的，我已经针对这两个容器，并应用了
display: flex和justify-content: space-between。让我来解释每一行。在Flexbox中，您有Flex containers和Flex items。
在您的例子中，由于我已经将
display: flex;应用到.extra_info_1和.extra_info_2divs中，所以我创建了这些Flex容器，并且它们所有的直接子元素都是Flex项。最后，我使用
justify-content: space-between将Flex容器中的空闲空间分割在Flex项目之间，或者在您的例子中是文本。如果你想了解更多关于Flexbox的信息，我建议你阅读Mozilla开发者网络的this article。