html - 不同高度的 float 背景很好

Question

我有一堆不同高度的 float 动态 div。 Fiddle

我想很好地 float div，所以在示例中 14、15、16 应该在 10 之前，然后 17、18、19 应该在 10 之后。关于如何实现这一目标的任何想法？

谢谢:)

.blankspot div {
  float: left;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: #fed;
  display: inline-block;
  vertical-align: top;
  height: 50px;
  width: 100px;
}

编辑:抱歉，可以看到我的描述有点不对劲。 Here's a pic of what I want to achieve

我自己对这个问题的研究告诉我，这个问题的解决方案会导致第三方代码或一些讨厌的忍者把戏。

Answer 1

如果像您的图片一样，您可以控制外部 div 的宽度以每行包含 7 个框，那么您可以调整边距以使框更整齐地流动。

更新 fiddle :http://jsfiddle.net/g4o8rukz/3/

您需要知道每行的框数的原因是因为您需要知道下一行中哪个框需要移动。如果选择方框 10 的大小加倍，那么它下面一行中的方框 15 需要使用类 neighborBelow 动态更新，以便将其邻居推到同一行。

您需要使用 JavaScript 应用这个 +5 偏移量，这样您就可以用这样的方式对您的框进行编号:

<label data-index="10">
   <div>10</div>
</label>

然后是selectedBox.attr('data-index') + 5来确定需要调整边距的框的data-index。这是 jQuery 语法，但我相信您明白了。