इनलाइन-ब्लॉक तत्व को नीचे की ओर क्यों धकेला जाता है?

Question

निम्नलिखित मेरा कोड है और मैं समझना चाहता हूं कि क्यों #firstDiv को सभी ब्राउज़रों द्वारा नीचे की ओर धकेला जा रहा है। मैं वास्तव में इस तथ्य के आंतरिक कामकाज को समझना चाहता हूं कि क्यों इसे एक तरह से या किसी अन्य द्वारा ऊपर की ओर खींचने के बजाय नीचे की ओर धकेला जा रहा है। (और मुझे पता है कि उनके टॉप को कैसे संरेखित करना है :))

और मुझे पता है कि इसका अतिप्रवाह: छिपा हुआ है जो इसे पैदा कर रहा है लेकिन यह सुनिश्चित नहीं है कि इसका धक्का उस दिव्य को नीचे की ओर क्यों जाता है।

body {
  width: 350px;
  margin: 0px auto;
}

#container {
  border: 15px solid orange;
}

#firstDiv {
  border: 10px solid brown;
  display: inline-block;
  width: 70px;
  overflow: hidden;
}

#secondDiv {
  border: 10px solid skyblue;
  float: left;
  width: 70px;
}

#thirdDiv {
  display: inline-block;
  border: 5px solid yellowgreen;
}

<div id="container">
  <div id="firstDiv">FIRST</div>
  <div id="secondDiv">SECOND</div>
  <div id="thirdDiv">THIRD
    <br>some more content<br> some more content
  </div>
</div>

http://jsfiddle.net/WGCyu/ ।

Answer 1

मूल रूप से आपने अपने कोड में अधिक अव्यवस्था जोड़ दी है जो अधिक भ्रम पैदा कर रही है इसलिए पहले मैं अव्यवस्था को हटाने की कोशिश करता हूं जो वास्तविक मुद्दे को समझने में बाधा उत्पन्न करता है।

सबसे पहले हमें यह स्थापित करना होगा कि असली सवाल क्या है? इसका यही कारण है कि " inline-block" तत्व को नीचे की ओर धकेला जाता है।

अब हम इसे समझना शुरू करते हैं और अव्यवस्था को दूर करते हैं।

1 - सभी तीन तलाक को एक ही सीमा चौड़ाई क्यों नहीं दी जाती? दे खते हैं।

2 - क्या फ्लोटिंग तत्व का इनलाइन-ब्लॉक एलिमेंट के साथ कोई संबंध है जिसे नीचे की ओर धकेला जा रहा है? नहीं, इसका इससे कोई लेना-देना नहीं है।

तो, हमने उस div को पूरी तरह से हटा दिया है । और आप इनलाइन-ब्लॉक तत्व के समान व्यवहार को नीचे की ओर धकेलते हुए देख रहे हैं।

यहाँ कुछ साहित्य की बारी आती है कि वे लाइन बक्सों के विचार को समझें और कैसे वे एक ही पंक्ति में पंक्तिबद्ध हों, पिछले पैराग्राफ को ध्यान से पढ़ें क्योंकि आपके प्रश्न का उत्तर निहित है।

'इनलाइन-ब्लॉक' की आधार रेखा सामान्य प्रवाह में उसके अंतिम लाइन बॉक्स की आधार रेखा होती है, जब तक कि इसमें कोई प्रवाह लाइन बॉक्स न हो या यदि इसकी 'अतिप्रवाह' संपत्ति में 'दृश्यमान' के अलावा अन्य कोई संगणित मूल्य हो, बेसलाइन किस मामले में सबसे नीचे का किनारा है।

यदि आप बेसलाइन के बारे में निश्चित नहीं हैं, तो यहां सरल शब्दों में संक्षिप्त विवरण दिया गया है।

'Gjpqy' को छोड़कर सभी वर्ण आधार रेखा पर लिखे गए हैं, आप आधार रेखा के बारे में सोच सकते हैं जैसे कि आप इन "यादृच्छिक वर्णों" के ठीक नीचे एक सरल क्षैतिज रेखा खींचते हैं तो यह आधार रेखा होगी लेकिन अब यदि आप 'gjpqy' में से कोई भी लिखते हैं। एक ही पंक्ति पर वर्ण (अक्षर) तो इन वर्णों का निचला भाग रेखा से नीचे गिर जाएगा।

अतः हम कह सकते हैं कि 'gjpqy' को छोड़कर सभी वर्ण पूरी तरह से आधार रेखा से ऊपर लिखे गए हैं जबकि इन वर्णों का कुछ भाग आधार रेखा के नीचे लिखा गया है।

3 - हमारी लाइन की आधार रेखा कहाँ है, इसकी जाँच क्यों नहीं की गई? मैंने कुछ अक्षर जोड़े हैं जो हमारी रेखा की आधार रेखा को दर्शाते हैं ।

4 - क्यों हमारे divs में कुछ अक्षर जोड़ने के लिए भी div में उनके आधारभूत नहीं? यहाँ, कुछ वर्ण बेसलाइन को स्पष्ट करने के लिए divs में जोड़े गए हैं ।

अब जब आप आधार रेखा के बारे में समझते हैं, तो इनलाइन-ब्लॉकों की आधार रेखा के बारे में निम्नलिखित सरलीकृत संस्करण पढ़ें।

i) यदि प्रश्न में इनलाइन-ब्लॉक की अपनी अतिप्रवाह संपत्ति दिखाई देती है (जो कि डिफ़ॉल्ट रूप से है, तो हालांकि सेट करने की कोई आवश्यकता नहीं है)। तब इसकी आधार रेखा रेखा के युक्त ब्लॉक की आधार रेखा होगी।

ii) यदि प्रश्न में इनलाइन-ब्लॉक के पास अपनी अतिप्रवाह संपत्ति है जो अन्य THAN पर दिखाई देती है। तब इसका निचला मार्जिन बॉक्स वाले लाइन की आधार रेखा पर होगा।

• पहले बिंदु पर विस्तार से

अब अपनी अवधारणा को स्पष्ट करने के लिए इसे फिर से देखें कि ग्रीन डिव के साथ क्या हो रहा है । यदि अभी तक कोई भ्रम है, तो यहां युक्त ब्लॉक की आधार रेखा स्थापित करने के लिए ग्रीन डिव के करीब अधिक वर्ण जोड़े गए हैं और ग्रीन डिव बेसलाइन संरेखित है।

खैर, मैं अब दावा कर रहा हूं कि उनके पास एक ही आधार रेखा है? सही?

5 - फिर उन्हें ओवरलैप क्यों नहीं किया जाता है और देखें कि क्या वे दूसरे पर सही हैं? तो, मैं तीसरा div -left लाता हूं: 35px; यह देखने के लिए कि क्या उनके पास अब एक ही आधार रेखा है ?

अब, हमें अपना पहला अंक सिद्ध हो गया है।

• विस्तार से दूसरा बिंदु

खैर, पहले बिंदु के दूसरे बिंदु के स्पष्टीकरण के बाद आसानी से पचने योग्य है और आप देखते हैं कि पहली div जो दृश्य (छिपी) के अलावा अन्य से अधिक संपत्ति सेट है लाइन के आधार रेखा पर इसका निचला मार्जिन है।

अब, आप इसे स्पष्ट करने के लिए कुछ प्रयोग कर सकते हैं।

1. पहले div अतिप्रवाह सेट करें : दृश्यमान (या इसे पूरी तरह से हटा दें) ।
2. दूसरा div overflow सेट करें : दृश्यमान के अलावा ।
3. दोनों divs अतिप्रवाह सेट करें : दृश्यमान के अलावा ।

अब अपने अव्यवस्था को वापस लाएं और देखें कि क्या सब कुछ आपको ठीक लग रहा है।

1. अपनी फ्लोटेड डिव को वापस लाएं (बेशक
   शरीर की कुछ चौड़ाई बढ़ाने की आवश्यकता है ) आप देखें कि इसका कोई प्रभाव नहीं है।
2. समान विषम मार्जिन वापस लाएं ।
3. हरे रंग की div को ओवरफ्लो करने के लिए सेट करें : जैसा कि आपने अपने प्रश्न में सेट किया है, दृश्यमान है (यह मिसलिग्न्मेंट सीमा की चौड़ाई 1px से 5px तक बढ़ने के कारण है, इसलिए यदि नकारात्मक बाएँ समायोजित करें तो आप देखेंगे कि कोई समस्या नहीं है)
4. अब अतिरिक्त पात्रों को हटा दें जिन्हें मैंने समझने में सहायता के लिए जोड़ा है । (और निश्चित रूप से नकारात्मक बाईं ओर हटा दें)
5. अंत में शरीर की चौड़ाई को कम करें क्योंकि हमें अब और व्यापक की आवश्यकता नहीं है।

और अब हम वापस वहीं हैं जहां से हमने शुरुआत की थी।

उम्मीद है कि मैंने आपके सवाल का जवाब दिया होगा।

Comments

इस तरह के एक महान स्पष्टीकरण के लिए धन्यवाद, लेकिन मुझे आपकी बात नहीं मिली "फिर इसकी आधार रेखा रेखा के युक्त ब्लॉक की आधार रेखा होगी।" क्या यह रेखा के आधार रेखा के समान है जैसा कि आपने दूसरे बिंदु में स्पष्ट किया है?

— शॉन टेलर

विलंबित जवाब। मैंने सिर्फ वही समस्या नोट की, और मैं सिर्फ एनआईसीई स्पष्टीकरण के लिए गैरी लिंडाहल को धन्यवाद देना चाहता था।

— टिमएसपीक्यूआर

+1 ntgCleaner भले ही मैं अच्छे उत्तरों की सराहना करता हूं, गैरी लिंडाहल पढ़ने के लिए बहुत कुछ है और मैं उन कुछ पंक्तियों को याद कर रहा हूं जहां यह कहता है 'समाधान: XY'

— बेसिक कोडर

मुझे यह विस्तृत विवरण अविश्वसनीय रूप से जानकारीपूर्ण मिला, धन्यवाद। मैंने थोड़ी देर के लिए एक अवधारणा के साथ संघर्ष किया, और एक अद्यतन फ़िडल बनाया है जो दूसरों के लिए स्पष्ट कर सकता है।

— jonsanders101

@ntgCleaner धन्यवाद आदमी .. सभी स्पष्टीकरण के बाद भी मैं इसे काम नहीं कर सका। लेकिन आपकी टिप्पणी ने यह किया :)

— सुपरसन

Answer 2

vertical-alignCSS में डिफ़ॉल्ट मान है baselineऔर यह नियम inline-blockइस http://www.brunildo.org/test/inline-block.html पढ़ने के साथ भी लागू होता है

vertical-align:topअपने inline-blockDIV में लिखें ।

इसे देखें http://jsfiddle.net/WGCyu/1/

Comments

क्या आपने मेरा प्रश्न पढ़ा है? मैंने कभी समस्या को ठीक करने के लिए नहीं कहा।

— शॉन टेलर

@ शेवनटयोर: प्रश्न शीर्षक बहुत ही भ्रामक है। हम सहज रूप से शीर्षक पढ़ते हैं फिर कोड के लिए शूट करते हैं, यदि कोई हो। हम शायद ही कभी वास्तविक पाठ पढ़ते हैं। यह एक बुरी आदत है लेकिन आपको शायद समझना चाहिए कि ऐसा क्यों होता है। : पी

— पुरग

@ संदीप: अपने एडिट के बारे में तो फ़र्स्ट डिड को तब भी क्यों संरेखित किया जाता है

— शॉन टेलर

@ संदीप: आपके द्वारा प्रदान किया गया लिंक जानकारीपूर्ण है, लेकिन यह इस सवाल पर मदद नहीं करता है क्योंकि यह display:inline-blockसंयुक्त के व्यवहार का वर्णन नहीं कर रहा है float:left/right।

— जीटा

@ThomasMcCabe शायद ही; अगर कोई बुरा जवाब देता है, तो वह भविष्य के दर्शकों को संकेत देने के लिए योग्य है कि उसके अच्छे इरादों की परवाह किए बिना उसमें कुछ गड़बड़ है। उस ने कहा, मुझे नहीं लगता कि यह उत्तर कभी भी अस्वीकार करने योग्य है; अपने मूल रूप में भी, यह स्वीकार किए गए उत्तर द्वारा छोड़ी गई पहेली का एक मुख्य टुकड़ा प्रदान करता है - यह कि आधारभूत संरेखण एकमात्र तरीका नहीं है कि तत्व लंबवत रूप से संरेखित हो जाते हैं, और यदि आप vertical-alignसंपत्ति को बदलते हैं, तो किसी भी जटिलता का वर्णन नहीं किया जाता है। स्वीकृत उत्तर लागू होता है।

— मार्क अमेरी

Answer 3

महज प्रयोग करें vertical-align:top;

डेमो

Answer 4

इसका वैकल्पिक उदाहरण देखें । ऐसे व्यवहार का कारण CSS3 मॉड्यूल में वर्णित है : लाइन: 3.2। लाइन बॉक्स रैपिंग [1] :

सामान्य तौर पर, एक लाइन बॉक्स का प्रारंभ किनारा इसके ब्लॉक के प्रारंभ किनारे को छूता है और अंतिम छोर इसके युक्त ब्लॉक के छोर को छूता है। हालाँकि, फ्लोटिंग बॉक्स में ब्लॉक ब्लॉक और लाइन बॉक्स एज हो सकते हैं। इस प्रकार, हालांकि इनलाइन फॉर्मेटिंग संदर्भ में लाइन बॉक्स में आमतौर पर एक ही इनलाइन प्रगति अग्रिम (ब्लॉक वाले ब्लॉक) होती है, वे अलग-अलग हो सकते हैं यदि उपलब्ध इनलाइन-प्रगति स्थान फ्लोट के कारण कम हो जाता है [...]

जैसा कि आप देख सकते हैं, तीसरे तत्व को नीचे की ओर धकेल दिया जाता है, हालांकि इसमें कोई overflowगुण नहीं होता है । कारण खोजने के लिए कहीं और होना चाहिए। आपके द्वारा नोटिस किया गया दूसरा व्यवहार कैस्केडिंग स्टाइल शीट्स लेवल 2 रिविजन 1 (सीएसएस 2.1) विशिष्टता में वर्णित है : 9.5 फ्लोट्स / 2 :

चूंकि फ्लोट फ्लो में नहीं होता है, इसलिए फ्लोट बॉक्स से पहले और बाद में बनाए गए नॉन-पोजिशन ब्लॉक बॉक्स ऐसे खड़े होते हैं मानो फ्लोट मौजूद नहीं है। हालांकि, फ्लोट के बगल में बनाई गई वर्तमान और बाद की लाइन के बक्से को फ्लोट के मार्जिन बॉक्स के लिए जगह बनाने के लिए आवश्यक रूप से छोटा किया जाता है।

आपके सभी display:inline-block;divs baselineइस मामले में एक विशेष प्रकार का उपयोग कर रहे हैं। 10.8 लाइन ऊंचाई की गणना: 'लाइन-ऊंचाई' और 'वर्टिकल-अलाइन' गुण (बहुत अंत) [3] :

'इनलाइन-ब्लॉक' की आधार रेखा सामान्य प्रवाह में उसके अंतिम लाइन बॉक्स की आधार रेखा होती है, जब तक कि इसमें कोई प्रवाह लाइन बॉक्स न हो या यदि इसकी 'अतिप्रवाह' संपत्ति में 'दृश्यमान' के अलावा अन्य कोई संगणित मूल्य हो, बेसलाइन किस मामले में सबसे नीचे का किनारा है।

इसलिए जब आप फ़्लोटिंग तत्वों और inline-blockतत्वों का उपयोग कर रहे हैं, फ़्लोटिंग तत्व को किनारे पर धकेल दिया जाएगा और इनलाइन फ़ॉर्मेटिंग को 1 के अनुसार पुनर्गणना किया जाएगा । दूसरी ओर, यदि वे फिट नहीं होंगे तो अगले तत्वों को छोटा कर दिया जाएगा। चूंकि आप पहले से ही न्यूनतम स्थान के साथ काम कर रहे हैं, इसलिए आपके तत्वों को संशोधित करने का कोई दूसरा तरीका नहीं है, फिर उन्हें 2 धक्का दें । इस मामले में, उच्चतम तत्व आपके रैपिंग डिव के आकार को परिभाषित करेगा, इस प्रकार baseline 3 को परिभाषित करेगा , जबकि दूसरी ओर 2 में बताई गई स्थिति और चौड़ाई के संशोधन को ऐसे न्यूनतम अधिकतम ऊंचाई वाले तत्वों पर लागू नहीं किया जा सकता है। इस मामले में मेरे पहले डेमो के रूप में एक व्यवहार का परिणाम होगा।

अंत में, कारण आपकी overflow:hiddenरोकथाम करेगा#firstDiv लिए निचले किनारे पर धकेल दिया जाएगा #container, हालांकि मैं धारा 11 में एक कारण नहीं मिल सकता है । इसके बिना overflow:hiddenयह 2 और 3 को छोड़कर और परिभाषित के रूप में काम करता है । डेमो

TL; DR: W3 सिफारिशों और ब्राउज़र में कार्यान्वयन पर एक बहुत करीबी नज़र है। यदि आप अपने आस-पास के तत्वों में किए गए सभी परिवर्तनों को नहीं जानते हैं, तो मेरी विनम्र राय में अस्थायी तत्व अप्रत्याशित व्यवहार दिखाने के लिए निर्धारित हैं। यहां एक और डेमो है जो फ्लोट्स के साथ एक आम समस्या दिखाता है।

Comments

यह "मानक" एक अविश्वसनीय गड़बड़ है। यह आश्चर्यजनक है कि वे इस सामान को ब्राउज़रों के बीच स्थिरता का व्यवहार करने में सक्षम हैं। अरे रुको, नहीं, वे ऐसा करने में सक्षम नहीं हैं।

— त्रिवेंको

Answer 5

_{मैंने मूल रूप से इस प्रश्न का उत्तर देना शुरू कर दिया था, लेकिन इससे पहले कि मैं खत्म कर पाऊं, इसे डुप्ले के रूप में बंद कर दिया गया था, इसलिए मैं इसके बजाय यहां उत्तर पोस्ट करता हूं।}

सबसे पहले, हमें यह समझने की जरूरत है कि क्या inline-blockहै। MDN में परिभाषा का कहना है:

तत्व एक ब्लॉक एलिमेंट बॉक्स बनाता है जो आसपास की सामग्री के साथ प्रवाहित होगा जैसे कि यह एक इनलाइन बॉक्स था (एक बदले हुए तत्व की तरह व्यवहार करना)

यह समझने के लिए कि यहां क्या हो रहा है, हमें देखने की जरूरत है vertical-align, और यह डिफ़ॉल्ट मूल्य है baseline।

इस चित्रण में आपके पास यह रंग चार्ट है:
नीला: आधार रेखा
लाल: पंक्ति-ऊंचाई
का शीर्ष और निचला हरा: इनलाइन सामग्री बॉक्स के ऊपर और नीचे।

# एलीट तत्व में, आपके पास कुछ पाठ्य सामग्री होती है जो यह नियंत्रित करती है कि आधार रेखा क्या है। इसका मतलब यह है कि अंदर का टेक्स्ट #left के लिए बेसलाइन को परिभाषित करता है।
# अधिकार में, कोई सामग्री नहीं है, इसलिए ब्राउज़र के पास आधार रेखा के रूप में बॉक्स के नीचे का उपयोग करने के अलावा कोई अन्य विकल्प नहीं है।

इस विज़ुअलाइज़ेशन को देखें जहां मैंने एक उदाहरण पर आधार रेखा खींची है जहाँ पहली इनलाइन कंटेनर में कुछ पाठ है, और अगला खाली है:

यदि आप विशेष रूप से शीर्ष पर एक तत्व संरेखित करते हैं, तो आप वास्तव में कहते हैं कि आप इस तत्व के शीर्ष को पंक्ति बॉक्स के शीर्ष पर संरेखित करते हैं।

यह एक उदाहरण द्वारा समझना आसान हो सकता है।

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
    vertical-align: baseline;
}
div#middle {
    vertical-align: top;
    height: 50px
}
   
div#right {
    font-size: 30px;
    height: 100px
}

<div id="left">
  <span>groovy</span>
</div>
<div id="middle">groovy</div>

<div id="right">groovy</div>

परिणाम यह है - और मैंने नीली आधार रेखा, और लाल रेखा बॉक्स को जोड़ा: यहां क्या होता है, यह है कि लाइन बॉक्स की ऊंचाई को इस बात पर निर्भर किया जाता है कि पूरी लाइन की सामग्री कैसे रखी गई है। इसका अर्थ है कि शीर्ष संरेखण की गणना करने के लिए, आधारभूत संरेखण की गणना पहले की जानी चाहिए। तत्व है , तो यह आधारभूत स्थिति के लिए नहीं किया जाता है। लेकिन और खड़ी ताकि उनके आधार रेखा गठबंधन कर रहे हैं तैनात हैं। जब यह किया जाता है, तो लाइन बॉक्स की ऊंचाई बढ़ गई है, क्योंकि तत्व को बड़े फ़ॉन्ट आकार के परिणामस्वरूप थोड़ा ऊपर धकेल दिया गया है। तब तत्व के लिए शीर्ष स्थिति की गणना की जा सकती है, और यह लाइन बॉक्स के शीर्ष के साथ है।
#middlevertical-align:top#left#right#right#middle

Answer 6

समस्या यह है क्योंकि आपने फ्लोट लागू किया है: दूसरी डिव पर छोड़ दिया। जो बाईं ओर आने के लिए दूसरी div बनाता है और आपकी पहली div ड्रॉप करती है और आपकी दूसरी div के बाद आती है। यदि आप फ्लोट लागू करते हैं: पहले div पर भी छोड़ दिया जाता है, तो आपकी समस्या दूर हो जाएगी।

अतिप्रवाह: छिपा हुआ आपके लेआउट के लिए कोई समस्या नहीं है, अतिप्रवाह: छिपा हुआ केवल एक div के आंतरिक तत्वों को प्रभावित करता है, इसका अन्य तत्वों से कोई लेना देना नहीं है जो बाहर हैं।

Comments

अच्छा है अगर इसकी धक्का दिया जा रहा है क्योंकि यह फ्लोटेड डिव के बाद दूसरे स्थान पर आता है तो थर्डडिव नीचे की ओर क्यों नहीं जाता है?

— शॉन टेलर

क्योंकि तीसरे तलाक के पहले दूसरा तलाक है, जो तैरता नहीं है: बाएं;

— पाल सिंह

लेकिन इस नियम का उल्लेख कहां किया गया है कि फ्लोटेड डिव के बाद यदि कुछ डिव आएगा तो वह नीचे की ओर गिर जाएगा? मैंने w3.org की जाँच की।

— शॉन टेलर

वह तत्व जो आधार रेखा पर नहीं गिरता है और यदि आपने नकारात्मक वोट दिया है तो मुझे कहना होगा कि यह सबसे तार्किक जवाब था

— पाल सिंह

नहीं, मैंने नकारात्मक वोट नहीं दिया और हां आपका जवाब नकारात्मक के लायक नहीं है। बस ऊपर की ओर मतदान किया।

— शॉन टेलर

Answer 7

padding:0;शरीर को जोड़ने और अपने divs के मार्जिन को हटाने का प्रयास करें ।

background-color:*anyअंतर जांचने के लिए पृष्ठभूमि * से अलग रंग जोड़ें ।

Comments

प्रारूप कोड के उत्तर को संपादित करें, आप कोड को शुरू करने से पहले और कोड को समाप्त करने के बाद प्रतीक को जोड़कर कोड को प्रारूपित कर सकते हैं। के रूप में codeउदाहरण के लिए:। background-color:any color

— जेनो शाजी

Answer 8

सभी तत्वों के सभी CSS गुणों को समान बनाने का प्रयास करें।

मुझे भी ऐसी ही समस्या थी और इसे ठीक करते समय मैंने पहचाना कि मैं एक एलीमेंट को फॉन्ट प्रॉपर्टी के साथ डिव एलीमेंट में छोड़ रहा था।

फ़ॉन्ट तत्व के साथ उस तत्व को छोड़ने के बाद सभी डीआईवी का संरेखण परेशान था। इसे ठीक करने के लिए मैंने सभी DIV तत्वों में फ़ॉन्ट गुण सेट किया है जो उस तत्व के समान है जो इसमें गिरा दिया गया है।

निम्न उदाहरण में, वर्ग ".dldCuboidButton" का ड्रोप्ड तत्व फ़ॉन्ट-आकार के साथ परिभाषित किया गया है: 30 px।

इसलिए मैंने शेष वर्गों जैसे .cuboidRecycle, .liCollect, .dldCollect को DIV तत्वों द्वारा उपयोग किया जाता है। इस तरह से सभी DIV तत्व तत्व को छोड़ने से पहले और बाद में समान माप का पालन करते हैं।

.cuboidRecycle {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.liCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}

.dldCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#009933;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.dldCuboidButton {
    background-color:  #7c6436;
    color: white; /* White text */
    font-size: 30px; /* Set a font-size */
    border-radius: 8px;
    margin-top: 1px;
  }

यहां CSS के ऊपर गतिशील रूप से HTML का उदाहरण दिया गया है।

$("div#tabs").append(
  "<div id='" + newTabId + "'>#" + uniqueId + 
  "<input type=hidden id=hdn_tmsource_" + uniqueId + "  value='" + divTmpfest + "'>" + 
  "<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" + 
  "<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)'  ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
  "<div id='" + divDropLeCuboid  + "' class=liCollect ondrop='dropForLinkExport(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
  "<div id='" + divDropDwldCuboid  + "' class=dldCollect ondrop='dropForTMEntry(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
  "</div>" 
);