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

设置为主容器。

像这样： 小提琴

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

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