对齐六边形导航

Question

我努力将这些六边形放在3行上，这是我试图操纵的页面http://goo.gl/xpHmw

效果我正在努力实现

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

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

Answer 1

可能有很多方法可以实现它。我的解决方案可能是将六边形包裹在相对定位的容器中，为所有六边形分配position: absolute，并用“左”和“顶部”手动定位每个六边形。

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

ps - 下次你问一个问题时，你最好在jsfiddle.net或codepen中抽象你的问题，以便其他人可能会觉得更容易回答你，问题+解决方案将会让其他人在将来看到

Answer 2

好的，我只是在家里检查了你的网站。

这不是CSS中很容易做到的事情，因为它不适合矩形或＆＃34;块＆＃34;像CSS一样使用。

我有一些建议。也许它没有回答＆＃34;你的问题，但它会给你一个良好的开端。

Div标签不具有语义价值，而且它们是空的＆＃34;在这方面。在这种情况下，您在无序列表<ul>中使用了许多div标签来为六边形创建背景。这很好，但我会建议：

• 完全删除div。一个无序的列表真的不应该有div。这是一个＆＃34;无序＆＃34;列出毕竟。我要么专门使用div还是更好：
• 使用无序列表并将每个六边形创建为背景。一个框保持 - ＆gt; 1个六边形。六边形不会缩放。没有理由为顶部/底部设置单独的div。

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

伪解决方案：

• 每个六边形占据一个正方形。
• 在photoshop中以.png创建六边形背景
• 将每个人保持在<li>并将其浮动在<ul> - ＆gt;不要使用divs
• 使用负上边距将第二行重叠到其他六边形的裂缝中。

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