如何实现两列对齐：extraInfo与sunInfo并排及图标文本布局调整

关键修改点： #

• 给父容器.details设置display: flex，让内部两个子区块横向并排，通过justify-content控制间距
• 修正类名不一致问题（原CSS中是.extra-info，HTML中是extraInfo，统一为.extraInfo）
• 给.sunrise、.sunset添加display: flex和align-items: center，实现图标与文本横向对齐
• 调整.sunInfo和.extraInfo为display: flex+flex-direction: column，确保内部元素纵向排列

修改后的完整代码： #

CSS部分

* {
  margin: 0;
  padding: 0;
  font-family: 'poppins', sans-serif;
  box-sizing: border-box;
}

body {
  background-color: #222;
}

.container {
  width: 90%;
  max-width: 470px;
  background: linear-gradient(135deg, #00feba, #5b548a);
  color: #fff;
  margin: 100px auto 0;
  border-radius: 20px;
  padding: 40px 35px;
  text-align: center;
}

.search-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-bar {
  border: 0;
  outline: 0;
  background: #ebfffc;
  color: #555;
  padding: 10px 25px;
  height: 60px;
  border-radius: 30px;
  flex: 1;
  margin-right: 16px;
  font-size: 18px;
}

.search-box button {
  border: 0;
  outline: 0;
  background: #ebfffc;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.search-box button img {
  width: 25px;
  height: 30px;
}

.weather-icon {
  width: 170px;
  margin-top: 30px;
}

.weather h1 {
  font-size: 80px;
  font-weight: 500;
}

.weather h2 {
  font-size: 45px;
  font-weight: 400;
  margin-top: -10px;
}

.details {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

.sunInfo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.extraInfo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.col {
  display: flex;
  align-items: center;
  text-align: left;
}

.col img {
  width: 40px;
  margin-right: 10px;
}

.sunrise, .sunset {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sunrise img,
.sunset img {
  width: 60px;
  margin-right: 10px;
}

.humidity,
.wind {
  font-size: 28px;
  margin-top: -6px;
}

HTML部分

<div class="container">

  <div class="search-box">
    <input type="text" class="search-bar" placeholder="Search for a city..." spellcheck="false">
    <button> <img src="images/search.png"> </button>
  </div>

  <div class="weather">
    <img class="weather-icon" src="images/clear.png">
    <h1 class="temp"> 25°C </h1>
    <h2 class="city">New York</h2>
  </div>

  <div class="details">

    <div class="sunInfo">

      <div class="sunrise">
        <img src="images/sunrise.png">
        <p>6:00 AM</p>
      </div>

      <div class="sunset">
        <img src="images/sunset.png">
        <p>8:00 PM</p>
      </div>

    </div>

    <div class="extraInfo">

      <div class="col">
        <img src="images/humidity.png">

        <div>
          <p class="humidity">50%</p>
          <p>Humidity</p>
        </div>
      </div>

      <div class="col">
        <img src="images/wind.png">

        <div>
          <p class="wind">15mph</p>
          <p>Wind Speed</p>
        </div>

      </div>
    </div>
  </div>

</div>

说明： #

1. .details使用flex布局后，sunInfo和extraInfo自动横向排列，justify-content: space-around让它们在容器内均匀分布
2. sunrise和sunset添加flex布局后，图标与文本在同一行垂直居中对齐
3. 修正了原CSS中color: 555的语法错误，改为color: #555
4. 统一类名避免样式不生效问题

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