请看一下这个 jsFiddle并按下唯一的按钮来填写列表。如您所见DIV，列表中的元素已调整大小以填充包含的父级。这段代码正是我想做的，但我认为我实现它的方式对于这样一个看似简单的任务来说太复杂了。以下是为内部元素分配高度的算法的代码：
fill = function() {
//Loop through all elements once to get total weight
var totalWeight = 0;
var totalHeight = $("#container").height() - 15; //need a little extra empty space at the buttom
$(".list").each(function(i) {
totalWeight += parseInt($(this).attr('weight'));
totalHeight -= parseInt($(this).css('margin'));
});
//Loop though the element a second time to set the relative height
$(".list").each(function(i) {
var element = $(this);
element.css("height", (element.attr("weight") / totalWeight) * totalHeight);
});
}
我的问题是，我们能做到最好吗？是否有任何其他方法（希望更快或更优雅）以合理的跨浏览器兼容性来实现此功能？我只需要支持较新的 Firefox、Chrome 和 Safari。我在这里阅读了 flex-box并查看了它的有前途的规范，但它看起来不像 flex-box 可以在浏览器中一致地进行加权灵活布局。如果我错了，请给我一个简单的例子来说明如何实现这一点。
这种类型的加权灵活线性布局并不少见，例如它在 Android SDK 中作为布局选项之一提供。相对于分配给它们的权重值，调整元素大小以填充其父容器的推荐方法是什么？如果可能的话，一个纯 CSS 解决方案会很棒。