两种方法实现响应式九宫格布局
html布局以及基础样式代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式九宫格</title>
<style type="text/css">
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}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
方法一：浮动+宽度百分比
关键代码：
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%; }
