在 HTML 中紧密封装列表项网格

Question

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

这是我所做的：

但这就是我想要的样子：

到目前为止，我只是通过填充和添加边距，然后垂直对齐每个列表项来完成此操作。但我希望它比垂直对齐更进一步，我希望每个项目都直接位于其上方的项目下方。

我确信有一种比我所采用的方法非常不同、更好的方法，这也很棒！

这是我所做的：

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

Answer 1

如果您不支持旧版浏览器（IE 8 和 9），您可以使用 CSS 列来实现此功能，如下所示。

为了获得完整的浏览器支持，我会使用jQuery masonry 插件。