javascript - 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

您正在寻找的是负边距。

将另一个 div 放入您的#main div 并给它一个负边距。

margin: 0 -1%

这将使它好像没有边距，因为您有

overflow: hidden

设置为你的主容器。

是这样的:Fiddle

希望这能让你更接近你的目标 ;)