javascript - 用CSS实现加权灵活布局

Question

请看this 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 here 的文章并查看其 promising specs ，但看起来 flex-box 不能跨浏览器一致地进行加权灵活布局。如果我错了，请给我一个简单的例子来说明如何实现。

这种类型的加权灵活线性布局并不少见，例如它在 Android SDK 中作为布局选项之一提供。相对于分配给它们的权重值，调整元素大小以填充其父容器的推荐方法是什么？如果可能的话，纯 CSS 解决方案会很棒。

Answer 1

在谷歌搜索大约 30 分钟后，快速浏览一下。我可能会做一个演示，但真的没有太多时间。

你看过这里了吗

1. html5rocks
   
2. coding.smashmag...
   
3. tutsplus
   
4. umarr
5. w3c
6. benfrain

6号有一些很好的例子

编辑: 我正在查看他们网站上的 firefox 开发人员部分，并找到了
developer.mozilla...

我还找到了另一个带有下载 的示例!! github..

这可能会给你一些关于 firefox 的指导，其余的应该在我提供的其他链接中