jquery - 并排 float 不等高的div

Question

我正在尝试创建如下图所示的 float div(已上传到下面的链接)，我正在使用 float left 并排移动所有 div。

第一张图片有默认的div，

当我们点击 div 时，它的高度会扩大，如第二张图片所述，第三张 div 应该恰好低于第一张 div，而不会干扰其他 div，如第三张图片所示，当我们点击第二张 div 和第四张 div 时，与第二张图片相同应该 float 在底部并且不应该干扰其他 div。第一、第二和第三张图片有四个 div，但 div 可以是任意数量。在第四张图片中，我们只有三个 div，当我们单击第一个 div 时，第三个 div 应该向右移动，当我们有五个或七个 div 时，情况应该相同。我如何使用 css 执行此任务？

Answer 1

如果您希望点击事件增加 DIV 的大小，则必须使用 Javascript/JQuery。我不推荐 float - 这是一个使用内联 block 的快速指针。您可以使用 flexbox，但这取决于您需要支持哪些浏览器？

http://jsbin.com/domokefipi/1/edit