不同高度的浮动背景很好

Question

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

我想很好地浮动 div，所以在示例中，14、15、16 应该在 10 之前，然后 17、18、19 应该在之后。关于如何实现这一点有什么想法吗？

谢谢:)

.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

进行以下更改，您的突出显示框将适合父项

width: 100px;
height: 50px;
background-color: #f0a;

关于之前和之后你想说什么，我还是不太清楚。如果你想在 15 之后出现 10，那么只移动你的 div 重新排列。像这里的 jsfiddle http://jsfiddle.net/johirbuet/g4o8rukz/2/

Answer 2

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

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

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

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

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

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

不同高度的浮动背景很好

Floating backgrounds with different height nicely

html

css

css-float