css - 对齐六边形导航

Question

我一直在努力将这些六边形在 3 行上彼此相邻放置，这是我要操作的页面http://goo.gl/xpHmw

我想要达到的效果

http://www.queness.com/resources/images/13901.gif

非常感谢您的帮助和帮助。

Answer 1

好的，所以我刚刚在家中查看了您的网站。

这在 CSS 中不是很容易做到的，因为它不太适合 CSS 使用的矩形或“块”。

我有一些建议。也许它不会“回答”您的问题，但它会给您一个良好的开端。

Div 标签不具有语义价值，在这方面它们是“空的”。在本例中，您在无序列表中使用了许多 div 标签<ul>来为六边形创建背景。这很好，但我建议：

• 完全删除 div。无序列表真的不应该有 div。毕竟这是一个“无序列表”。我要么专门使用 div，要么更好：
• 使用无序列表并创建每个六边形作为背景。一个盒子容纳 -> 1 个六边形。六边形不缩放。没有理由为顶部/底部设置单独的 div。

您不必使用绝对定位。你只需要让这些六边形中的一些重叠。对于第二行六边形，您可以使用负边距来偏移并将它们放置在正确的位置。使用 .png 制作角落的透明胶片！

伪解决方案：

• 每个六边形占据一个正方形。
• 在 Photoshop 中将六边形背景创建为 .png
• 将每个都放在 a 中<li>并将它们浮动在 a <ul>--> 不要使用 div
• 使用负上边距将第二行重叠到其他六边形的裂缝中。

祝你好运。发布您的进度更新。我会进一步帮助你；但我无法为您提供解决方案。

Answer 2

可能有很多方法可以实现它。我的解决方案可能是将六边形包装在一个相对定位的容器中，将 a 分配position: absolute给所有六边形并使用“左”和“上”手动定位它们。

我已经抽象了代码以便您更好地理解。 http://codepen.io/nobitagit/pen/ojvue

ps - 下次您提出问题时，您最好在 jsfiddle.net 或 codepen 中抽象您的问题，这样其他人可能会发现更容易回答您，并且问题+解决方案将在那里供其他人看到。