html - 尽可能紧密地对齐 block

Question

假设我遇到这样的情况:http://jsfiddle.net/BL3M7/ :

HTML:

<div class="block" style="height: 50px">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>

CSS:

.block {
    height: 100px;
    width: 30%;
    border: 1px solid black;
    display: inline-block;
    vertical-align: top;
    float: left;
}

我希望 block 4 尽可能靠近 block 1 对齐。当然，我可以像 http://jsfiddle.net/BL3M7/2/ 这样使用 margin-top ，但我不能这样做，因为 block 大小的高度和宽度因页面而异。那么，是否可以在没有margin的情况下实现这样的效果呢？

Answer 1

如果您乐于尝试 CSS3 解决方案，那么您可以使用列数来实现类似的目的吗？

此技术将从上到下运行，而不是从左到右运行，因此请注意 HTML 内容的顺序。

我已经在你的代码中添加了一个容器:

<div class="block-container">
  <div class="block" style="height: 50px">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
  <div class="block">5</div>
  <div class="block">6</div>
</div>

然后是一些 CSS

.block-container {
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  column-count: 3;
  column-gap: 10px;
  width: 100%; 
}

.block {
  display: inline-block;
  margin-bottom: 20px;
  width: 100%;
  height: 100px;
  border: 1px solid black;
}

DEMO

注意:不幸的是，这在 IE9 及以下版本中不起作用。如果你想支持这些，你可能需要一个 JS 回退。