我正在嘗試擁有這樣的用戶界面：
這就是我嘗試這樣做的方式：
- 頂部的 div 作為封面圖片
- 下一個 div 包含兩個子 div 作為個人資料照片和 UI 詳細資訊 -
<div>Image Cover photos<div>
<div style="display : flex;">
<div>profile photo</div>
<div>UI Details Card</div>
</div>
- 然后我使用
transform : translateY(-50%)個人資料照片 div 將 50% 的部分移動到背景封面照片的頂部。 - 然而，這會產生一個問題，UI 細節保持在同一位置（這是理想的），但基線已更改。我希望它只有 50% 的高度，因此基線也與個人資料照片匹配，而且 UI 細節 wcard 會有一些文字，我不希望它也重疊在封面影像背景上（就像個人資料照片一樣）。我怎樣才能做到這一點？
uj5u.com熱心網友回復：
解決此問題的一種方法是使用 CSS 網格來放置所有內容。
body {
padding: 100px;
}
.card {
height: 300px;
width: 300px;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(3, 1fr);
outline: 1px solid;
}
.details {
background-color: blanchedalmond;
grid-area: 3/2/4/3;
}
.photo {
background-color: aquamarine;
grid-area: 2/1/4/2;
}
.cover {
grid-area: 1/1/3/3;
background-color: grey;
}
.cover img,
.photo img {
height: 100%;
width: 100%;
}<div class="card">
<div class="cover">
<img src="https://source.unsplash.com/random/?1" alt="">
</div>
<div class="photo">
<img src="https://source.unsplash.com/random/" alt="">
</div>
<div class="details">Details here</div>
</div>這是顯示不同網格區域的圖表：
注意藍色框（照片）和紅色框（封面）之間的重疊區域。由于照片 div在 DOM 中出現在封面 div 之后，因此照片 div 將具有更高的優先級，并且會占據這個重疊區域。
uj5u.com熱心網友回復：
您可以制作一個 2 列、3 行的網格并將專案放置在您想要的位置。
這是一個簡單的例子：
.container {
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-rows: 1fr 1fr 1fr;
width: 30vw;
height: 20vw;
}
.container :nth-child(1) {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
background: red;
}
.container :nth-child(2) {
grid-column: 1;
grid-row: 2 / span 2;
background: green;
}
.container :nth-child(3) {
background: blue;
}<div class="container">
<div></div>
<div></div>
<div></div>
</div>顯然，您將希望更改網格的相對大小以適合您的特定情況。
注意：這取決于您是否要在第一項中放置一些文本，以便它直接位于第二項上方，以及您是在第一列還是第二列中啟動第一個 div。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/515869.html
上一篇：Xcode14按鈕網格