浮动不等高度divs并排

Question

我正在尝试创建浮动div，如下图所示（上传链接），我使用float左移并移动所有div。

第一张图片有默认的div，

当我们点击div时它的高度扩展，如第二张图片中所提到的，第三个div应该正好低于第一个div，而不会打扰其他div，当我们点击第二个div第四个div时，第三个图片中的第二个图片相同应浮动底部，不应打扰其他div。第一，第二和第三张图片有四个div，但div可以是任意数字。在第四张图片中，我们只有三个div，当我们点击1st div时，第三个div应该向右移动，当我们有五个或七个div时它应该是相同的。我如何使用css执行此任务？

Answer 1

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

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