この 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 のみをサポートする必要があります。ここでフレックスボックスについて読んで、その有望な仕様を調べていましたが、フレックスボックスがブラウザー間で一貫して重み付けされた柔軟なレイアウトを実行できるようには見えません。私が間違っている場合は、これを達成する方法の簡単な例を教えてください。
このタイプの重み付けされた柔軟な線形レイアウトは珍しくありません。たとえば、レイアウト オプションの 1 つとして Android SDK で使用できます。要素に割り当てられた重み値を基準にして、要素のサイズを変更して親コンテナーを埋める推奨される方法は何ですか? 可能であれば、純粋な CSS ソリューションは素晴らしいでしょう。