jQuery：コンテナ内の要素の量に基づいたCSSマージン？

Question

jqueryを使用して簡単なコラージュ作成者を作成しようとしています。

私がする必要があるのは、各要素（コラージュ）の間に1％のマージンを持たせることです。

同時に、私はコラージュがコンテナから0マージンを持つ必要があります。

私はそれが理にかなっていると思います。

私はこのFIDDLEを作成しました

コードを実行すると、ボタンを4回クリックするだけで、コンテナ内に作成されたコラージュは完全にはっきりと表示されますが、コンテナと子要素の間に余裕があります。

この問題を解決する方法はありますか？

これは私のコードです：あなたが探しているもの

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

は負のマージンです。

#main divに別のdivを入れて、それにマイナスのマージンを付けます。それは余裕がなかったかのように

margin: 0 -1% 

これは、あなたのメインのコンテナに

overflow: hidden 

セットを持っているので、それを行います。

このような何か：Fiddle

希望これは近いあなたの目標にあなたを取得;）

Answer 2

上記の図に。主な問題は、どのアイテムが最初のアイテムであり、どのアイテムが最後のアイテムであるかのように思えます。動的な項目数の行が並んでいます。

最初の項目と最後の項目を調べて、マージンを調整することができます。

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