定位我的六边形网格的每隔一行不同？

Question

如何将每行第二行放入我的六边形网格中的第一行？ 我使用nth-of-type来创建等间隔，但现在我需要以某种方式管理每个第二行的所有六边形。我可以改变我的html标记，但更喜欢用n型或n型孩子保持干净。

http://codepen.io/anon/pen/QweBra

第一个CSS，用于隔开的作品。

#categories li:nth-of-type(1n+1){ 
    margin:0 1em; 
} 
#categories li:nth-of-type(6n+6){ 
    margin:2em 9em; 
} 

Answer 1

你可以包装每行中的另一个div，然后将每一个#category div:nth-of-type(2n)到你想要他们。

Answer 2

在你的CSS中添加类似的东西（虽然它使用nth-of-type，它并不真正“干净”），你需要重新组织你的标记或使用JavaScript。

#categories li:nth-of-type(6), #categories li:nth-of-type(7), #categories li:nth-of-type(8), #categories li:nth-of-type(9), #categories li:nth-of-type(10){ 
    position: relative; 
    top: -40px; 
    left: 95px; 
} 

#categories li:nth-of-type(11), #categories li:nth-of-type(12) { 
    position: relative; 
    top: -80px; 
} 

这很可能是一个JavaScript库（可能存在多个）。