動態佈置固定大小的divs取決於他們的號碼

我有一個730px寬，自動高度div。在這裏面我會有一些較小的divs 164px x 261px。

這些將被動態地拉入模板，所以我可以有1個，或者我可以有18個，或者爲了這個練習，我可以有1000個或其中任何一個。

我需要將這些空間放在一起，以便每一行之間的距離相等。簡單，如果我們處理的多達4個，我可以這樣做：

var totalWidth = $('.bigDiv .smallerDivs').length * $('.bigDiv .smallerDivs').width(); 
var margin = ($('.bigDiv').width - totalWidth)/($('.bigDiv .smallerDivs').length * 2); 
$('.bigDiv .smallerDivs').css('margin-left': margin , 'margin-right': margin);

然而，當有說5，我想有3對底部的頂行和2。或者如果我有7，我會在底部的前3名上4。如果有11個我想要4個頂部，4箇中間和3個下面等等等等，每一行都很好地證明了基於許多小盒子的存在。

任何人都可以提出一個很好的乾淨的方式，我可以去做這件事嗎？

enter image description here

來源

2012-06-27 Fraser

如果所有的div都是相同的寬度，那麼每行不可能有超過4個'730/164〜4'......你想均勻分配它們我猜但不能改變兒童div的實際大小嗎？你可能只用CSS就可以做到這一點 – elclanrs

如果我正確理解你的要求，我已經寫了一個詳細的答案：http://stackoverflow.com/questions/10548417/how-to-distribute-floated-elements-evenly -with-a-dynamic-column-and-row-count-in/10550660＃10550660 – thirtydot

這是正確的。因此，當我有超過4個div的時候需要更多的行 – Fraser

我的回答基本上是基於邏輯found in this post's answer。

整體的概念是，你可以評估什麼divs的數量可以被整除，然後附加一個類到更大的div，你可以用它來隔開你的內部divs。

$(document).ready(function(){ 
    function nos_div_eval(val,container,inner){ 
    var nosDivs = $(inner).length; 
    for(var i=val; i>1; i--){ 
     if (nosDivs % i === 0) { 
     $(container).addClass('div_by_' + i); 
     break; 
     } else { 
     $(container).addClass('prime'); 
     } 
    } 
    } 

    nos_div_eval(10, '.bigDiv', '.smallerDivs'); 

});

這將評估小的div的數量，並查看它是否是由2至10之間的任何數整除如果匹配，它增加了像.div_by_3類以外<div>。它會根據可以被2整除的最大數字10添加一個類。這樣，你可以設置你的風格是這樣的：

.bigDiv.div_by_3 .smallerDivs { 
    margin-right: 40px; 
} 

.bigDiv.div_by_4 .smallerDivs { 
    margin-right: 20px; 
    }

您可以以獲得的div闖入你想要的行調整的富餘量。

但是，如果較小的div的數量不能被2和10之間的數字整除，該函數將添加一個名爲「prime」的類，因爲賠率是一個質數。您可以爲這些div添加一些任意的保證金值，並與發生的情況一起生活。

如果你真的想要覆蓋你的基數，你可以改變「我」的初始值 - 你可以將它設置爲31，這是一個小於1000的平方的最大數字。我只是認爲這會使for循環真的很長。

This fiddle演示邏輯，但我簡化了一點，使其更加清晰。您可以添加<div>並查看新的警報值。

編輯：好吧，我不能離開足夠單獨，我已經回去，使功能包裝在它自己的，有三個參數。第一個參數是要檢查的上限值，然後是容器元素，然後是內部元素。一定要包含'＃'或'。'取決於元素是否具有ID或類別 - 這也可以與普通OL元素一起使用。

來源

2012-06-27 14:32:35 chipcullen

你是先生，是聖人。我現在正在前往辦公室，所以會試用並回復你。再次感謝。 – Fraser

很好地訣竅。謝謝！ – Fraser

我很高興它能滿足您的需求！ – chipcullen

動態佈置固定大小的divs取決於他們的號碼

回答

相關問題