jQuery: CSS-Marge basierend auf der Anzahl der Elemente im Container?

Question

Ich versuche, einen einfachen Collagenersteller mit jQuery zu erstellen.

was ich tun muss, ist eine Marge von 1% zwischen jedem Element (Collage) zu haben.

Aber gleichzeitig brauche ich die Collagen, um 0 Rand von ihrem Behälter zu haben.

Ich hoffe, dass das Sinn macht.

Ich habe diese FIDDLE erstellt, damit Sie wissen, was ich meine.

Wenn Sie den Code ausführen, klicken Sie einfach auf die Schaltfläche 4 mal und Sie sollten sehen, die Collagen innerhalb des Containers erstellt werden, völlig in Ordnung, aber es gibt einen Rand zwischen ihren Container und seine Kinder Elemente, die nicht gewünscht ist.

Gibt es eine Möglichkeit, dieses Problem zu lösen?

Dies ist mein Code:

$('#colBtn').live('click', function(){ 

    $('.lable').show(); 
    $('#reset').show(); 
    $('#fileField').show(); 
    $('#sbs').show(); 
    var width = $('#width').val(); 
    var height = $('#height').val(); 

    $('#main').append('<div class="droppable" style="width:'+width+';height:'+height+';overflow: hidden; position:relative;float:left; margin:1%;"></div>'); 


    $('#layout').text($('#main').html()); 
    return false; 
}); 

Answer 1

Was Sie suchen ist eine negative Marge.

legen Sie ein anderes Div in Ihre #main Div und geben Sie eine negative Marge.

margin: 0 -1% 

Dadurch wird es, als ob es keinen Spielraum hatte, da Sie

overflow: hidden 

Satz zu Ihrem Hauptbehälter haben.

Etwas wie folgt aus: Fiddle

Hope this Sie Ihrem Ziel näher kommt;)

Answer 2

Durch die oben angegebenen Zahl. Das Hauptproblem scheint herauszufinden, welches das erste Element und welches das letzte Element einer Zeile ist. dynamische Anzahl von Elementen in einer Reihe haben.

Ich finde nur den ersten Artikel und den letzten Artikel, den Sie verwenden können, um die Marge anzupassen.

function fix(){ 
var $item = $('.droppable'); 
var parentWidth = $item.parent().width(); 
var itemWidth = $item.outerWidth(true); 
var itemInLine = Math.floor(parentWidth/itemWidth); 
var totalItems = $item.length; 
var rows = totalItems/itemInLine; 

var lastItem = 0; 
var firstItem = 1; 
    for(var i = 1; i< rows + 1; i++){ 
    lastItem = i * itemInLine; 
    $('.droppable:nth-child('+ lastItem +')').css({'margin-top':'0px','margin-right':'0px'}); 
    firstItem = (i * itemInLine) - itemInLine + 1; 
    $('.droppable:nth-child('+ firstItem +')').css({'margin-top':'0px'}); 
    } 
}