在HTML中紧紧包装列表项的网格

对于我正在制作的网站的一部分,我希望有一个正方形对象的网格,并将它们紧密地捆在一起,这样就没有空格了.

这是我所做的：

但这就是我想要它的样子：

到目前为止,我只是通过填充和添加边距,然后通过垂直对齐每个列表项来实现此目的.但我希望它比垂直对齐更进一步,我希望每个项目直接适合它上面的一个项目.

我确信有一个非常不同的,比我采取的更好的方法,这也会很棒！

这就是我所做的：

HTML：

<header class="results">
        <ul class="container">
            <li>
                <a id="name">Temp</a>
                <a id="position">Temp</a>
            </li>
            <li>
                <a id="name">Temp</a>
                <a id="position">Temp</a>
                <a id="position">Temp</a>
            </li>
            <li>
                <a id="name">Temp</a>
                <a id="position">Temp</a>
            </li>
            <li>
                <a id="name">Temp</a>
                <a id="position">Temp</a>
            </li>
            <li>
                <a id="name">Temp</a>
                <a id="position">Temp</a>
            </li>
            <li>
                <a id="name">Temp</a>
                <a id="position">Temp</a>
            </li>
        </ul>
    </header>

CSS：

body {
  margin: 0;
}
.page {
  background: #fff;
}
header.results {
  max-width: 100%;
}
header.results .container {
  padding: 1em 0 2em;
  margin: 0px auto 3px;
  line-height: 1;
}
header.results .container li {
  width: 30%;
  display: inline-block;
  padding: 2em 2em 0.75em;
  margin: 0px auto 3px;
  background: rgb(240,240,240);
  vertical-align: top;
}
header.results .container li #name {
  text-align: center;
  display: block;
  margin-top: 0.5em;
  font-weight: 500;
}
header.results .container li #position {
  text-align: center;
  display: block;
  margin-top: 0.5em;
  font-weight: 250;
  font-size: 85%;
}

解决方法

如果您不支持旧浏览器(IE 8和9),则可以使用CSS列实现此功能,如 here.所示

为了获得完整的浏览器支持,我将使用jQuery masonry plugin.