方法一：利flex布局 flex动画演示参考
要点：
1,父容器设置成flex布局
2，让flex布局换行显示
3，父容器宽度固定，且不要设置高度
4，子元素的宽度用百分比表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- https://www.cnblogs.com/cap-rq/p/11017693.html -->
<style>
.container{
padding: 5px;
width:600px;
background: #eee;
/*flex布局*/
display: flex;
/*
flex-wrap：是否换行显示
nowrap（默认）：不换行
wrap:：换行，第一行在上方
wrap-reverse：换行，第一行在下方
*/
flex-wrap:wrap;
}
.box{
height:100px;
/*每行3列，然后减去margin*/
width:calc(calc(100% / 3) - 10px);
background:blue;
overflow:hidden;
display:inline-flex;
color:white;
box-sizing: border-box;
margin:5px;
flex: 0 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="box">11</div>
<div class="box">22</div>
<div class="box">33</div>
<div class="box">44</div>
<div class="box">55</div>
<div class="box">66</div>
<div class="box">77</div>
<div class="box">88</div>
</div>
</body>
</html>
方法二：利用li实现
- 要点：
- 用百分比指定li的宽度，如：30%
- li左浮动
<!DOCTYPE html>
<html>
<head>
<title>html5响应式九宫格</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8" />
<style type="text/css">
html,
body {
color: #222;
font-family: Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif;
margin: 0;
padding: 0;
text-decoration: none;
}
img {
border: 0;
}
ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
body {
background-color: #eee;
}
body .mainmenu:after {
clear: both;
content: " ";
display: block;
}
body .mainmenu li {
float: left;
margin-left: 2.5%;
margin-top: 2.5%;
width: 30%;
border-radius: 3px;
overflow: hidden;
}
body .mainmenu li a {
display: block;
color: #FFF;
text-align: center
}
body .mainmenu li a b {
display: block;
height: 80px;
}
body .mainmenu li a img {
margin: 15px auto 15px;
width: 50px;
height: 50px;
}
body .mainmenu li a span {
display: block;
height: 30px;
line-height: 30px;
background-color: #FFF;
color: #999;
font-size: 14px;
}
body .mainmenu li:nth-child(8n+1) {
background-color: #36A1DB
}
body .mainmenu li:nth-child(8n+2) {
background-color: #678ce1
}
body .mainmenu li:nth-child(8n+3) {
background-color: #8c67df
}
body .mainmenu li:nth-child(8n+4) {
background-color: #84d018
}
body .mainmenu li:nth-child(8n+5) {
background-color: #14c760
}
body .mainmenu li:nth-child(8n+6) {
background-color: #f3b613
}
body .mainmenu li:nth-child(8n+7) {
background-color: #ff8a4a
}
body .mainmenu li:nth-child(8n+8) {
background-color: #fc5366
}
</style>
</head>
<body>
<ul class="mainmenu">
<li><a href="/"><b><img src="images/tb01.png" /></b><span>关于我们</span></a></li>
<li><a href="/"><b><img src="images/tb02.png" /></b><span>新闻中心</span></a></li>
<li><a href="/"><b><img src="images/tb03.png" /></b><span>产品展示</span></a></li>
<li><a href="/"><b><img src="images/tb04.png" /></b><span>成功案例</span></a></li>
<li><a href="/"><b><img src="images/tb05.png" /></b><span>下载中心</span></a></li>
<li><a href="/"><b><img src="images/tb06.png" /></b><span>团队介绍</span></a></li>
<li><a href="/"><b><img src="images/tb06.png" /></b><span>人才招聘</span></a></li>
<li><a href="/"><b><img src="images/tb07.png" /></b><span>联系我们</span></a></li>
<li><a href="/"><b><img src="images/tb08.png" /></b><span>在线留言</span></a></li>
</ul>
</body>
</html>