我正在嘗試將這 8 個(gè)圖像插入到 CSSGrid 中。我將網(wǎng)格設(shè)置為 4 列和 2 行。我將 img 的高度和寬度設(shè)置為 100%，認(rèn)為它會(huì)占用每行一列的空間。相反，圖像比預(yù)期的要大得多。我使用嵌套網(wǎng)格，我認(rèn)為我沒有正確實(shí)現(xiàn)。例如，我將圖像的寬度和高度設(shè)置為300px，一行將有4張以上的圖片。我認(rèn)為這是因?yàn)閳D像沒有占據(jù)整個(gè)列的大小，但我不確定。當(dāng)我檢查元素時(shí)，我似乎看不到 CSSGrid 有什么幫助嗎？<!DOCTYPE html><html><head> <title>Layout Master</title> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <div class="container"> <div class="zone green"> <span>About</span> <span>Products</span> <span>Our Team</span> <span id="Contact">Contact</span> </div> <div class="zone red">Cover</div> <div class="zone blue"> <img src="data_storage_2_2.png" alt="data storage"> <img src="desktop_analytics_2.png" alt="desktop analytics"> <img src="files_2.png" alt="files"> <img src="monitor_coding_2.png" alt="monitor coding"> <img src="monitor_settings_2.png" alt="monitor settings"> <img src= "server_2_2.png" alt="server"> <img src="server_3.png" alt="server"> <img src="server_safe_2.png" alt=server safe> </div> <div class="zone yellow">Made By Cristobal Manrique</div> </div></body></html>
2 回答
隔江千里
TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超10個(gè)贊
拼寫錯(cuò)誤.zone blue至.zone.blue
.zone.blue{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
}
拉風(fēng)的咖菲貓
TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個(gè)贊
插入圖像標(biāo)簽使用DIV標(biāo)簽并添加背景屬性
背景圖像： url('../images/abc.jpg');
圖像標(biāo)簽很難按要求對(duì)齊。div 是最好的解決方案。
如果你想要更詳細(xì)的網(wǎng)格系統(tǒng)，請(qǐng)使用flex，它是更高效和流行的一種。
- 2 回答
- 0 關(guān)注
- 136 瀏覽
添加回答
舉報(bào)
0/150
提交
取消