两种方法实现响应式九宫格布局

html布局以及基础样式代码如下

 

	
	
	


	

		
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%;  }   

　　

转载于:https://www.cnblogs.com/superlizhao/p/8421380.html