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

设置为您的主容器。

像这样的东西：小提琴

希望这能让您更接近您的目标；）