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

Question

如何将每隔一行放入六边形网格中的顶行？ 我使用nth-of-type来创建相等的间距，但现在我需要以某种方式设法定位每隔一行的所有六边形。我可以改变我的html标记，但更喜欢用nth-of-type或nth-child保持清洁。

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时，它不是真的＆＃34;清洁＆＃34;），您需要重新整理标记，或使用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库（可能有几个）。