使用CSS实现加权灵活布局

请看看this jsFiddle并按下唯一的按钮来填充列表。正如你所看到的，DIV列表中的元素被调整大小以填充包含的父元素。这段代码完全符合我想要做的事情，但我认为，对于这样一个看似简单的任务，我实现这个方法太复杂了。这里是算法的代码分配高度内部元素：使用CSS实现加权灵活布局

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。我正在阅读关于弹性盒here并查看它的promising specs，但它看起来不像弹性盒可以在浏览器中一致地加权灵活布局。如果我错了，请给我一个简单的例子，说明如何实现这一点。

这种类型的加权灵活线性布局并不少见，例如它在Android SDK中可用作布局选项之一。相对于赋予它们的权重值，调整元素大小以填充其父容器的建议方法是什么？如果可能的话，纯粹的CSS解决方案将会非常棒。

来源

2012-11-10 Aras

Flexbox将是可用的。您可能必须为新旧样式编写一些重复规则，但它可行。 – Blender

我无法找到一个很好的例子，说明如何用flebox做到这一点。你能提供一个基于我上面的jsFiddle的flexbox解决方案吗？ – Aras

只需要快速查看一下，大约30分钟后Google搜索一下。我可以做一个演示，但不是真的有很多时间。

有你在这里看着

有6日一个

编辑一些很好的例子： 我看还以为他们的网站上Firefox的开发人员部分，发现
developer.mozilla...

我还发现了另一个以下载为例！ github..

这可能给你一些方向Firefox和剩下的应该是在其他环节我提供

来源

2012-11-10 09:53:50 ryanc1256

+1，用于付出努力并分享您的搜索结果。但是，如果你看看这个例子：参考文献6的http://dabblet.com/gist/3437894，你可以清楚地看到它在Firefox中不起作用。我看到很多示例代码，并讨论了flex-box，但很少介绍其功能的跨浏览器工作演示。因此，这个问题。 – Aras

@Aras我发现了一个firefox的例子，但它更多的写作而不是演示 – ryanc1256

使用CSS实现加权灵活布局

回答

相关问题