Question

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

我希望块4尽可能与块1对齐。当然，我可以像http://jsfiddle.net/BL3M7/2/一样使用margin-top，但我不能这样做，因为块大小的高度和宽度因页面而异。那么，没有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后备。

Answer 2

不幸的是，这不能用css来完成。但是有很棒的Javascript解决方案可以完全满足您的需求！

查看：http://masonry.desandro.com/

或者如果您还需要更多选项：http://isotope.metafizzy.co/

尽可能地将块彼此对齐

2 个答案: