jQuery: कंटेनर में तत्वों की मात्रा के आधार पर सीएसएस मार्जिन?

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 में एक और div डालें और इसे नकारात्मक मार्जिन दें।

margin: 0 -1% 

इस के बाद से आप अपने मुख्य कंटेनर के लिए

overflow: hidden 

सेट यह कर देगा जैसे कि वह कोई मार्जिन था।

कुछ इस तरह: Fiddle

आशा यह आप अपने लक्ष्य के करीब हो जाता है;)

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