我有一个3列的布局,我试图用这个油漆插图向您展示.

我希望每列的最后一个div占用剩余的空间(蓝色).

此布局的总高度不固定,也不是div的数量.
有些div会有修复尺寸,有些则没有.

有没有纯粹的CSS解决方案？

最佳答案
Susy可能会为你做到这一点.

它可以让你轻松地在Sass中制作响应式网格,这不是vanilla css,而是会编译成它. Square Market使用susy,如果您查看他们的主页,之前已链接并包含在下面,他们会实现与您所寻找的类似的效果.

image http://f.cl.ly/items/2y3s0A0u102x1J402043/Screen%20Shot%202013-12-13%20at%2011.44.35%20AM.png

这是一个响应式网格的基本示例,因此您可以了解它的简单性：

// Complex AG grid, brought to you by Susy:
.ag1 { @include span-columns(2,10); }
.ag2 { @include span-columns(6,10); }
.ag3 { @include span-columns(2 omega, 10); }
.ag4 { @include span-columns(3,6); }
.ag5 { @include span-columns(3 omega,6); }
.ag6 { @include span-columns(2,6); }
.ag7 { @include span-columns(4 omega,6); }
.ag8 { @include span-columns(2,4); }
.ag9 { @include span-columns(2 omega,4); }
.ag10 { clear: both; }

如您所愿,您不必指定特定列的总高度,并可以锁定特定列的尺寸.