jQuery：基于容器中元素的数量的CSS边距？
我正在尝试使用jquery创建一个简单的拼贴创作者。
我需要做的是每个元素（拼贴）之间的边距为1％。
但与此同时，我需要拼贴画从他们的容器中获得零余量。
我希望这是有道理的。
我已经创建了这个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;
});
你要找的是一个负边界。
把另一个div放在你的#main div中并给它一个负值。
margin: 0 -1%
这将使它好像没有余量，因为你有
overflow: hidden
设置为您的主容器。
像这样的东西：小提琴
希望这能让你更接近你的目标;）
由以上给出的数字。 主要问题似乎是搞清楚哪一个是第一个项目，哪个是最后一个项目。 在一行中具有动态数量的项目。
我只是想出第一个项目和最后一个项目，你可以用它来调整保证金。
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'});
}
}
上一篇: jQuery: css margin based on the amount of elements in container?