在一行浮动元素之间添加一个元素

Question

我有一堆在网格中对齐的方框。

它们全部浮动到左边，然后一个框的边距和宽度约为33％，因此一旦三个框彼此相邻，下一个框就会进入下一行。相当甚至三分之一。

这就是我的开始：

当点击一个方框时，我现在想在我点击的方框下面添加一个方框。

我希望看到它发生的方式几乎只是增加了一排盒子之间的空间，并且新的盒子被挤进那个空间。

这是我想看到的：

目前我只是使用jquery的.after()在我点击的框后添加一个框。这个方框有clear:both;，它可以完美地工作，但只有当点击第三个方框时......当我点击第二个或第一个方框时，同一行的下面方框将浮动到下一行。 当然这是完全可以预测的，因为它完全符合我的要求。 但我希望他们留在那里！我只是不知道如何。

这就是我得到的：

实现这一目标的最佳方式是什么？

以下是我的代码示例： http://jsfiddle.net/z3ggf/1/

Answer 1

所以基本上，你需要找到行中的最后一个（第三个）框，然后附加一些html

$(".box").click(function(){
    var next_third_box_index = Math.floor($(this).index('.box') / 3) * 3 + 2;            
    var $third = $('#container .box:eq('+next_third_box_index+')');      
    $third.after('<div class="break"></div>');                   
});

jQuery演示：

• http://jsfiddle.net/9MMWs/

<强>文档：

• http://api.jquery.com/index/

---

这是在单击div的行中找到thrid框的索引的方法：

Math.floor($(this).index('.box') / 3) * 3 + 2;

• 如果您点击框0，则第三个框索引等于floor（0/3）* 3 + 2 = 2
• 如果您点击框1，则第三个框索引等于floor（1/3）* 3 + 2 = 2
• 如果您点击框2，则第三个框索引等于floor（2/3）* 3 + 2 = 2
• 如果您点击框3，则第三个框索引等于floor（3/3）* 3 + 2 = 5
• 如果您点击框4，则第三个框索引等于floor（4/3）* 3 + 2 = 5
• 如果您点击框5，则第三个框索引等于floor（5/3）* 3 + 2 = 5
• 如果您点击框6，则第三个框索引等于floor（6/3）* 3 + 2 = 8
• ...