我在嘗試使用 diplay:grid 將一個 div 放在另一個 div 下方時遇到問題。div 被放置在另一個上面而不是下面。
“app-bm-payment-card-item”是一個自定義的 Angular 組件。
HTML檔案
//div wrapper
<div *ngIf="pageReady && myProfiles" class="ion-padding">
//div showing the cards stacked or collapsed
<div *ngIf="!inEditMode" class="card_container_stacked_main">
<app-bm-payment-card-item *ngFor="let card of myProfiles" [card]="card" [editMode]="inEditMode"
(onDeleteClick)="removeCard(card)" (onSelect)="selectCard(card)" (onEditClick)="editCardInfo(card)">
</app-bm-payment-card-item>
</div>
//div showing the cards expanded
<div *ngIf="inEditMode" class="card_container_expanded_main">
<app-bm-payment-card-item *ngFor="let card of myProfiles" [card]="card" [editMode]="inEditMode"
(onDeleteClick)="removeCard(card)" (onSelect)="selectCard(card)" (onEditClick)="editCardInfo(card)">
</app-bm-payment-card-item>
</div>
//div to be placed below the other one(s)
<div class="div">
TEXT
</div>
</div>
SCSS 檔案：
.card_container_stacked_main {
display:grid;
position: relative;
grid-auto-rows:30px; /* a fixed height to create an overflow */
}
.card_container_expanded_main {
position: relative;
max-width: 400px !important;
//margin-bottom: 15px;
}
.div {
position: relative;
}
因此，基本功能是在點擊任何卡片時卡片串列應該顯示堆疊或折疊。這就是為什么我使用 inEditMode 布林值來了解應該顯示哪個 div 以及隱藏哪個 div。展開卡片串列顯示時div（TEXT）正確放置在串列下方，但激活堆疊卡片串列時將div放置在串列頂部，這是錯誤的，應該放置在堆疊下方/折疊卡片串列。請參閱下面的圖片。
uj5u.com熱心網友回復：
有趣的問題，因為“錢包”中的卡片數量可以是 1、2 或N，grid-auto-rows并且和/或grid-template-rows需要在 CSS 中明確指定跟蹤大小的事實。
多種解決方案可用（節約使用網格）
#1 簡單但丑陋的
只需將 a 設定margin-top: 200px;為 TEXT div。僅當卡片堆疊時才應用此功能。
我不是這個解決方案的忠實粉絲，因為它更像是一個“修復”而不是一個合適的設計。
顯示代碼片段
function expandStackCards() {
var wrapper = document.getElementById("wrapper");
if (wrapper.classList.contains("stacked")) {
wrapper.classList.remove("stacked");
} else {
wrapper.classList.add("stacked");
}
}button {
width: 400px;
margin-bottom: 10px;
}
#wrapper {
display: grid;
grid-template-columns: 400px;
gap: 10px;
}
#wrapper.stacked {
grid-auto-rows: 30px;
gap: 0px;
}
.card {
width: 100%;
height: 200px;
background-color: grey;
border-radius: 20px;
padding: 6px 20px;
box-sizing: border-box;
}
.card span {
font-family: sans-serif;
text-transform: uppercase;
color: white;
}
.card.green {
background-color: green;
}
.card.blue {
background-color: blue;
}
.my-text {
margin: 10px;
}
.stacked .my-text {
margin-top: 200px;
}<button onclick="expandStackCards()">Expand / Stack</button>
<div id="wrapper" class="stacked">
<div class="card green"><span>Card #1</span></div>
<div class="card blue"><span>Card #2</span></div>
<div class="my-text">TEXT</div>
</div>或者在這里找到Codepen 代碼
#2 使用 JavaScript 檢測并正確設定grid-auto-rows值
在我看來，最好的解決方案是沒有margin技巧，只有純網格 CSS。
為此，您需要一些 JS 來檢測錢包中的卡片數量，然后設定該值。
顯示代碼片段
function stackedCards() {
var wrapper = document.querySelector('#wrapper.stacked');
if (wrapper) {
var num_cards = wrapper.querySelectorAll(':scope .card').length;
let style = getComputedStyle(wrapper);
row_height_str = style.gridAutoRows;
var new_grid_auto_rows = row_height_str.concat(' ').repeat(num_cards - 1);
new_grid_auto_rows = new_grid_auto_rows.concat('auto');
wrapper.style.gridAutoRows = new_grid_auto_rows;
}
}
// This function is only for the DEMO button
function expandStackCards() {
var wrapper = document.getElementById("wrapper");
if (wrapper.classList.contains("stacked")) {
wrapper.classList.remove("stacked");
wrapper.style.removeProperty("grid-auto-rows");
} else {
wrapper.classList.add("stacked");
stackedCards();
}
}
stackedCards();button {
width: 400px;
margin-bottom: 10px;
}
#wrapper {
display: grid;
grid-template-columns: 400px;
gap: 10px;
}
#wrapper.stacked {
grid-auto-rows: 30px;
gap: 0px;
}
.card {
width: 100%;
height: 200px;
background-color: grey;
border-radius: 20px;
padding: 6px 20px;
box-sizing: border-box;
}
.card span {
font-family: sans-serif;
text-transform: uppercase;
color: white;
}
.card.green {
background-color: green;
}
.card.blue {
background-color: blue;
}
.my-text {
margin: 10px;
}<button onclick="expandStackCards()">Expand / Stack</button>
<div id="wrapper" class="stacked">
<div class="card green"><span>Card #1</span></div>
<div class="card blue"><span>Card #2</span></div>
<div class="my-text">TEXT</div>
</div>或者在這里找到Codepen 代碼
#3 使用 JavaScript 將類設定為 #wrapper
你也可以用JS來檢測卡片的數量，然后將正確的類應用到網格（#wrapper）。
這有點像以前的解決方案，但沒有通過 JS 應用 CSS 樣式，但是當然為此，您需要在 CSS 檔案中包含以下內容：
.wallet-1-cards {
grid-auto-rows: auto;
}
.wallet-2-cards {
grid-auto-rows: 30px auto;
}
.wallet-3-cards {
grid-auto-rows: 30px 30px auto;
}
.wallet-4-cards {
grid-auto-rows: 30px 30px 30px auto;
}
// etc...
使用第三個解決方案，您可以避免在 JS 代碼中使用 CSS（您只將一個類設定為 div），這不是一個糟糕的解決方案，前提是您知道不可能有更多的 5 或 6 張卡片，因為會污染您的 CSS有幾十個無用的定義并不是一件好事。
uj5u.com熱心網友回復：
這應該移動最后一張卡片下的文本。我測驗了它并為我作業：
設定屬性stackedContainerHeight或類似的東西并計算容器高度->
stackedContainerHeight = 堆疊卡片的高度（以像素為單位）*（卡片/組態檔陣列的長度 -1） 完整卡片高度 邊距等調整。
例如：
stackedContainerHeight = 30 * (this.myProfiles.length-1) 50 15;
為容器元素動態設定堆疊容器高度
[style.height.px]="stackedContainerHeight"
最初的問題是什么：Grid-auto-rows 減少了容器高度和容器上最后一張滿卡流的一部分。此解決方案計算正確的高度，文本 div 將在容器之后正確呈現。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/398188.html