在类似砖石的浮动布局中消除死角

Question

我正在制作一个产品页面布局，其中有两列具有各种高度项目。我试图避免将项目嵌套在两个列容器中，这样我就可以在一个列的小屏幕上获得最佳的元素顺序。

我遇到的问题是，有时第二个块（向左浮动）比第一个块（向右浮动）长，有时则相反。当第三个块被赋予clear: left以确保它尽可能正确时，会出现问题，第四个块不会超过第三个块的顶部。

以下是CodePen，代码为：http://codepen.io/anon/pen/jAQdEK?editors=1100#anon-login

Answer 1

您想要做什么看起来像布局表给我。使用display类型table，table-row和table-cell可能是一个简单而可靠的解决方案。参见：

http://codepen.io/wortwart/pen/grQqzv