在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列实现此功能，如图所示here.

要获得完整的浏览器支持，我会使用jQuery masonry plugin。