html – 具有可折叠div的流布局,用于维护行结构

我有一个用可折叠的div制作的流畅布局.当它们坍塌时,它们会在下面留下一个空的空间,它会被下一个div自动填充(它们都有浮动：左).然而,这看起来不太好,我想保持“行结构”而不会失去移动div的能力(当窗口变小时). JSFiddle here.

CSS片段：

.clickable {
     border: 1px dotted black;
     width: 200px;
     float: left;
     height:50px;
     margin-right:20px;
     margin-bottom:20px;
}

HTML片段：

有纯CSS解决方案吗？我不想乱用JavaScript.我知道我可以动态确定列数,然后将它们包装成“行”,但我还不愿意使用这个解决方案.

最佳答案

更改浮动：左侧显示：内联块.这是我对你的小提琴的唯一改变,似乎给你正在寻找的效果.

http://jsfiddle.net/GLf7m/2/