我知道這可能是一個新手詢問，但我并不擅長 CSS，所以我希望能得到一些關于如何實作我的目標的提示。
我正在嘗試為 NFT 創建一個類似于下圖的卡片相冊：
相反，我的代碼得到的是顯示在標題、描述、價格和按鈕上的影像。如何解決這個問題？
JSX檔案：
return (
<>
<div className="img-grid">
{nfts.map((nft, i) => (
<div key={i} className="img-wrap">
<img src={nft.image} />
<div>
<p>{nft.name}</p>
<div>{nft.description}</div>
</div>
<div>
<p>{nft.price}</p>
<button onClick={() => buyNft(nft)}>buy</button>
</div>
</div>
))}
</div>
</>
);
CSS檔案：
.img-grid {
/* width: 80%; */
margin: 1px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 50px;
}
.img-wrap {
overflow: hidden;
height: 0;
padding: 50% 0;
/* padding controls height, will always be perfectly square regardless of width */
position: relative;
/* opacity: 0.8; */
}
.img-wrap img {
min-width: 100%;
min-height: 100%;
max-width: 150%;
position: absolute;
top: 0;
left: 0;
}
我取得了什么：
uj5u.com熱心網友回復：
嘗試將影像包裝器和段落分開放置
<div className="img-grid">
{nfts.map((nft, i) => (
<div key={i}>
<div className="img-wrap">
<img src={nft.image} />
</div>
<div>
<p>{nft.name}</p>
<div>{nft.description}</div>
</div>
<div>
<p>{nft.price}</p>
<button onClick={() => buyNft(nft)}>buy</button>
</div>
</div>
))}
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/385335.html
標籤：javascript html css 反应