当div向下移动时，调整其余部分的大小以占用剩余空间

Question

我有三个（但问题适用于任何数量）div具有百分比宽度和比例与容器的大小但具有最小宽度，它们将在容器中向下移动。以下是当前情景的一个例子：

div {
  float: left;
  width: 33%;
  min-width: 300px;
  height: 300px;
  margin-right: 2px;
}

<div style="background: red"></div>
<div style="background: green"></div>
<div style="background: blue"></div>

http://jsfiddle.net/ULLBr/

我想知道剩下的元素是否有可能缩放然后占用＆＃39;行中的剩余空格？

我知道这可以通过javascript实现，但是纯粹的CSS解决方案会非常感激，但是如果不可能那么在javascript中处理它的最佳方法是什么？

理想情况下，任何一种解决方案都应该能够处理n个div。

谢谢。

Answer 1

我建议你看看弹性盒子。

我在这里创建了一个jsfiddle，我认为这是你想要实现的目标。 另外值得一看的是我在css tricks很棒的网站上进行了改编。