马赛克式图像网格，浮点数和边距

Question

我的主页是一系列小图片（用于导航），用于创建完美的矩形。

我的计划最初是使用<ul>并使用float和margin，但我不再确定这是最佳选择。

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

<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 -->

Answer 1

你可以使用JavaScript插件，例如Masonry，Isotope，或简单但有效的Wookmark jQuery Plugin（我个人最喜欢的）。但是，对于这样一个简单的布局，可能不值得开销。

我认为你使用float:left走在正确的轨道上。但是，您需要对左上角的两个框进行分组，以便在不使用JavaScript的情况下实现所需的效果。

此外，由于这不是列表，我会使用HTML5 <nav>标记而不是<ul>和<li>。点击here查看以下代码的工作示例。

<强> 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

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;
}

我倾向于选择最小的HTML标记而牺牲更复杂的CSS，这就是我广泛使用:nth-child的原因，但你可以使用类名来实现相同的效果。

Answer 2

这种类型的安排是通过bin-packing算法自动完成的。有几个JavaScript库可以执行此操作，最常用的是Isotope