CSS squared multiple implementations with border

Squares, each cell slide up display the full frame.

Study of knowledge itself is not complicated, margin negative occlusion and flow layout relative transcendence.

The code is such that the fixed portion,

<div>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5.0</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>   
 <div>9</div>      
</div>

There are four scenes,

1. compatible with newer browsers, html structure can not be changed using CSS3, which I used the Child-Nth   http://jsbin.com/exuKuXI/3   compatible with IE9 +

2. Compatible with all browsers, html structure can be changed, you can use floating    http://jsbin.com/uTOQEVO/3

3. Compatible with all browsers, html structure can be changed, do not allow the use of floating    http://jsbin.com/IvopIxi/40

4. Compatible with all browsers, html structure can not be changed, may be used JS　　http://jsbin.com/ESELAQU/6

 

Reproduced in: https: //www.cnblogs.com/jamesldj/p/3336326.html