鏈接下方的圖片參考
模板
https://paste.pics/G9OS7
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;
}
學習 HTML CSS 原諒我的錯誤 在此先感謝
uj5u.com熱心網友回復：
沒有可重現的代碼很難除錯，但如果我理解正確，你想把它放在左下角。您可以創建一個絕對的 div，其中包含所有內容。
假設container是你的父 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/439429.html
上一篇：撲動中的OTP頁面