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个盒子，那么你就可以搞清楚边缘，让盒子更整齐地流动。

更新了小提琴：http://jsfiddle.net/g4o8rukz/3/

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

您需要使用JavaScript应用此+5偏移量，以便您可以使用以下内容对您的框进行编号：

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

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

漂亮地漂浮不同高度的背景

2 个答案: