javascript – jQuery:基于容器中元素数量的CSS保证金?

前端之家收集整理的这篇文章主要介绍了javascript – jQuery:基于容器中元素数量的CSS保证金?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用 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;
});

解决方法

您正在寻找的是负利润.

在你的#main div中添加另一个div并给它一个负余量.

margin: 0 -1%

这将使它好像没有保证金,因为你有

overflow: hidden

设置为主容器.

像这样:Fiddle

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

原文链接:https://www.f2er.com/jquery/156952.html

猜你在找的jQuery相关文章