Html 马赛克风格的图像网格、浮动和边距

我的主页是一系列小图片（用于导航），排列成一个完美的矩形

我最初的计划是使用

，并创造性地使用

浮动

和

保证金

，但我不再确定这是最佳选择

我能达到这种效果的最简单方法是什么

<div class="home-nav">
   <ul>
      <li><a href="#">blog</a></li>
      <li><a href="#">contact</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">weddings</a></li>
      <li><a href="#">portraits</a></li>
      <li><a href="#">contact</a></li>
   </ul>
</div><!-- end home-nav -->

---

这种安排是通过装箱算法自动完成的。有几个JavaScript库可以做到这一点，最流行的一个是

您可以使用类似JavaScript的插件，或者简单但有效的（我个人最喜欢的）。然而，对于这样一个简单的布局，它可能不值得开销

我认为使用

float:left

是正确的。但是，您需要将左上角的两个框分组，以便在不使用JavaScript的情况下实现所需的效果

此外，由于这不是一个真正的列表，我将使用HTML5

标记，而不是

和

。单击以查看下面代码的工作示例）

HTML

<nav>
  <div>
    <a href="#"></a>
    <a href="#"></a>
  </div>
  <div>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
  </div>
</nav>

---

我倾向于以牺牲更复杂的CSS为代价来选择最小的HTML标记，这就是为什么我广泛使用

：nth child

，但是你可以用类名来实现同样的效果。

或者如果你不需要自动排列，你可以使用上面@David的建议。这是我一直在寻找的聪明、简单的解决方案，谢谢

nav {
  width: 315px;
}
nav a {
  float: left;
  background-color: gray;
}
nav div:nth-child(1) {
  float: left;
  width: 100px;
}
nav div:nth-child(1) a:nth-child(1) {
  width: 100px;
  height: 50px;
  margin: 0 5px 5px 0;
}
nav div:nth-child(1) a:nth-child(2) {
  width: 100px;
  height: 50px;
  margin: 0 5px 0 0;
}
nav div:nth-child(2) a:nth-child(1) {
  width: 50px;
  height: 105px;
  margin: 0 5px 0 5px;
}
nav div:nth-child(2) a:nth-child(2) {
  width: 155px;
  height: 105px;
}
nav div:nth-child(2) a:nth-child(3) {
  width: 155px;
  height: 105px;
  margin: 5px 5px 0 0;
}
nav div:nth-child(2) a:nth-child(4) {
  width: 155px;
  height: 105px;
  margin: 5px 0 0 0;
}