css - 以不同方式定位六边形网格的每一行？

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

如果不向您的 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 库(可能有几个)。