jQuery: margine css basato sulla quantità di elementi nel contenitore?

Question

Sto provando a creare un semplice creatore di collage usando jquery.

quello che devo fare è avere un margine dell'1% tra ogni elemento (collage).

Ma allo stesso tempo ho bisogno che i collage abbiano 0 margine dal loro contenitore.

Spero che abbia senso.

Ho creato questo FIDDLE in modo da sapere cosa intendo.

quando si esegue il codice, è sufficiente fare clic sul pulsante 4 volte e si dovrebbe vedere i collage creati all'interno del contenitore perfettamente bene MA c'è un margine tra il loro contenitore e gli elementi figli che non è voluto.

C'è un modo per risolvere questo problema?

Questo è il mio codice:

$('#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

Quello che stai cercando è un margine negativo.

metti un altro div nel tuo #main div e dargli un margine negativo.

margin: 0 -1% 

In questo modo sarà come se non avesse alcun margine poiché avete

overflow: hidden 

insieme al contenitore principale.

Qualcosa di simile a questo: Fiddle

Spero che questo ti porta più vicino al tuo obiettivo;)

Answer 2

Con quanto sopra figura data. Il problema principale sembra capire quale sia il primo elemento e quale sia l'ultimo elemento di una riga. avere un numero dinamico di elementi in una riga.

Ho appena scoperto il primo elemento e l'ultimo elemento che è possibile utilizzare per regolare il margine.

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'}); 
    } 
}