html布局以及基礎樣式代碼如下

響應式九宮格

html, body { color:#222; margin:0; padding: 0; text-decoration: none; }

ul { list-style: none outside none; margin:0; padding: 0; }

body { background-color:#eee; }

ul li:nth-child(8n+1) {background-color:#36A1DB}

ul li:nth-child(8n+2) {background-color:#678ce1}

ul li:nth-child(8n+3) {background-color:#8c67df}

ul li:nth-child(8n+4) {background-color:#84d018}

ul li:nth-child(8n+5) {background-color:#14c760}

ul li:nth-child(8n+6) {background-color:#f3b613}

ul li:nth-child(8n+7) {background-color:#ff8a4a}

ul li:nth-child(8n+8) {background-color:#fc5366}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

方法一：浮動+寬度百分比

關鍵代碼：

body ul:after { clear: both; content: " "; display: block; }

ul li{ float:left; width: 30%; height:30%; margin-top: 2.5%; margin-left: 2.5%; }

方法二：flex布局+寬度百分比

關鍵代碼：

ul{ display: flex;justify-content: space-between;flex-wrap: wrap;}

ul li{width: 30%; margin-top: 2.5%; }

總結

以上是生活随笔為你收集整理的html 响应式布局 九宫格,两种方法实现响应式九宫格布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。