जावास्क्रिप्ट को एक मूल div तत्व

के अंदर अपडेट किए गए बच्चे div तत्वों को जस्टिफाइज़ करें। मैं एक किनारे से एक कंटेनर div तत्व के दूसरे किनारे पर समान रूप से फैले तीन div तत्वों को प्रदर्शित करने की कोशिश कर रहा हूं।जावास्क्रिप्ट को एक मूल div तत्व

यहां HTML कोड है।

<body> 
    <div id="container" width="50%"> 
     <div>foo</div> 
     <div>bar</div> 
     <div>baz</div> 
     <div class="stretch"></div> 
    </div> 
</body>

यहां सीएसएस कोड है।

#container { 
    margin: 10%; 
    background: lightblue; 
    text-align: justify; 
} 

#container div { 
    display: inline-block; 
    width: 30%; 
    background: gray; 
} 

#container div.stretch { 
    width: 100%; 
    height: 0; 
}

यह ठीक काम करता है के रूप में यहां देखा जा सकता: http://jsfiddle.net/zVf4j/

हालांकि, जब मैं निम्नलिखित जावास्क्रिप्ट का उपयोग कंटेनर div अद्यतन करने के लिए प्रयास करते हैं, बच्चे div तत्व नहीं रह गया है बाहर किनारे से के किनारे में फैल कंटेनर div तत्व।

var containerDiv = document.getElementById('container') 
containerDiv.innerHTML = 
    '<div>fox</div>' + 
    '<div>bay</div>' + 
    '<div>baz</div>' + 
    '<div class="stretch"></div>'

text-align: justify; सीएसएस में संपत्ति इस मामले में कोई प्रभाव नहीं लगती है। मुद्दा यहां देखा जा सकता है: http://jsfiddle.net/b5gBM/

मेरे दो प्रश्न हैं।

जब वे जावास्क्रिप्ट के साथ अद्यतन होते हैं तो बच्चे div तत्वों की नियुक्ति क्यों बदलती है?
हम इस समस्या को कैसे ठीक कर सकते हैं ताकि बच्चे div तत्वों को जावास्क्रिप्ट के साथ अद्यतन किए जाने के बाद भी कंटेनर div के एक किनारे से दूसरे किनारे तक फैल जाए?

स्रोत

2013-07-14 Susam Pal

समस्या आसानी से तय हो गई है प्रदान नहीं करते। जेएस के माध्यम से जोड़े गए divs के बाद आपको बस एक जगह जोड़ने की आवश्यकता है और औचित्य देना चाहते हैं। लाइव डेमो: http://jsfiddle.net/b5gBM/9/

var containerDiv = document.getElementById('container') 
containerDiv.innerHTML = 
    '<div>fox</div> ' + 
    '<div>bay</div> ' + 
    '<div>baz</div> ' + 
    '<div class="stretch"></div>'

मुद्दा खाली स्थान के कारण होता है। जेएस के माध्यम से जोड़े जाने पर, divs के बीच कोई सफेद जगह नहीं है। इसके बारे में टेक्स्ट (इनलाइन) के बारे में सोचें। यदि आप एक-दूसरे के बगल में तीन अक्षर डालते हैं और उन्हें औचित्य देना चाहते हैं, तो यह काम नहीं करेगा। इसे एक शब्द के रूप में माना जाएगा। लेकिन जब आप उनके बीच एक जगह डालते हैं, तो उन्हें तीन अलग-अलग शब्दों के रूप में माना जाता है और यह उचित हो जाएगा।

आप जेएस के बिना एक ही समस्या देख सकते हैं। आप किसी भी रिक्त स्थान के बिना कोड लिखते हैं तो यह या तो सम्बन्ध स्थापित करेंगे नहीं: के लिए सही http://jsfiddle.net/zVf4j/1/

<div>foo</div><div>bar</div><div>baz</div>

स्रोत

2013-07-14 21:36:16 tw16

lol :) एक ही विचार [\ N डेमो] (http://jsfiddle.net/b5gBM/22/) मुझे इससे नफरत है क्योंकि यह इस तरह व्यवहार नहीं करना चाहिए ... –

मैं अगर आप अपने div रों चौड़ाई परिभाषित कर रहे हैं 30% होने के लिए तो आप उन्हें करने के लिए बीच div करने के लिए मार्जिन के रूप में शेष 10% वितरित कर सकते हैं, प्रश्न 1 के लिए लेकिन सवाल 2 के लिए एक जवाब नहीं है सभी समान रूप से फैल गए। तो तुम text-align:justify; से छुटकारा पाने और इस का उपयोग कर सकते हैं:

#container div:nth-child(2) { 
    margin: 0 5%; 
}

* ध्यान दें कि IE8 और कम :ntch-child समर्थन

Demo fiddle

स्रोत

2013-07-14 21:35:54

जावास्क्रिप्ट को एक मूल div तत्व

उत्तर

संबंधित मुद्दे