左下对齐分区

Question

图片参考如下link

template

html

<div class="basicinfo">
      <div class="dandt">1:00 AM Tuesday 13 April 2022</div>
      <div class="location">Toronto</div>
      <div class="weathertype">Cloudy</div>
      <div class="temp">8 Degree C</div>
</div>

但无法按图对齐

css

.basicinfo {
  position: relative;
}

.dandt {
  position: absolute;
  bottom: 0%;
  color: white;
}

.location {
  position: absolute;
  bottom: 0%;
  color: white;
}

学习HTMLCSS 原谅我的错误提前致谢

Answer 1

没有可重现的代码很难调试，但如果我理解正确的话，你想把它放在左下角。您可以创建一个包含所有内容的绝对 div。

假设 container 是您的 parent div（卡片）

.container {
  background-color: black;
  height: 200px;
  width: 400px;
  position: relative;
  color: white;
}

.basicinfo {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

.weather-display {
  display: flex;
}

<div class="container">
  <div class="basicinfo">
    <div class="dandt">1:00 AM Tuesday 13 April 2022</div>
    <div class="location">Toronto</div>
    <div class="weather-display">
      <div>☁️</div>
      <div>
        <div class="weathertype">Cloudy</div>
        <div class="temp">8 Degree C</div>
      </div>
    </div>
  </div>
</div>

左下对齐分区

Align division bottom left

css

user-interface