2014-10-12 22 views
5

में div मैं है इस प्रश्न के लिए निम्नलिखित बेला:सीएसएस सापेक्ष स्थिति टूटता नई लाइन

<div class="outer"> 
    <div class="inner1"> 
     Y 
    </div> 
    <div class="inner2"> 
     X 
    </div>  
</div> 

सीएसएस करने के लिए एक चौड़ाई प्रदान करती है: http://jsfiddle.net/jcb9xm44/

वहाँ 2 इनलाइन-ब्लॉक div एक माता पिता div में की हैं बच्चे div के लिए पैरेंट div और 2 चौड़ाई।

.outer { 
    width: 210px; 
    border: 1px solid red; 
} 

.inner1 { 
    width: 200px; 
    border: 1px solid orange; 
    display: inline-block; 
} 
.inner2 { 
    width: 50px; 
    position:relative; 
    left: -50x; 
    display: inline-block; 
    border: 1px solid lightblue;} 

मैं उम्मीद कर रहा था कि दोनों divs एक ही पंक्ति पर दिखाई दें। हालांकि माता-पिता दोनों बच्चों को पकड़ने के लिए पर्याप्त नहीं हैं, क्योंकि दूसरे बच्चे के पास नकारात्मक ऑफसेट है, इसलिए उन्हें एक ही पंक्ति में फिट करना संभव होना चाहिए। यह लाइन क्यों तोड़ता है?

+1

'मार्जिन-बाएं: -50 पीएक्स;' - http://jsfiddle.net/2jgag2zs/ – Anonymous

+0

आपने ऐसा क्यों उम्मीद की? नेस्टेड divs की चौड़ाई माता-पिता के अंदर उपलब्ध स्थान से अधिक है। –

+0

ग्रेट। लेकिन मार्जिन सहायता और ऑफ़सेट क्यों नहीं करता है? – shaft

उत्तर

5

यह लाइन क्यों तोड़ता है?

जैसा कि आपने कहा था, ऐसा इसलिए है क्योंकि मूल तत्व दोनों तत्वों के लिए पर्याप्त नहीं है। इस व्यवहार को बदलने के लिए, inline-block रैपिंग से तत्वों को रोकने के लिए आप पैरेंट तत्व में white-space: nowrap जोड़ सकते हैं।

Example Here

.outer { 
    width: 210px; 
    border: 1px solid red; 
    position:relative; 
    white-space: nowrap; 
} 

साइड नोट: - left: -50x ->left: -50px

  • आपसे कोई टाइपिंग त्रुटि थी।
  • inline तत्व respect whitespace in the markup
  • तत्व की सीमा इसकी चौड़ाई गणना में शामिल है। इसे शामिल करने के लिए box-sizing: border-box का उपयोग करें।
  • आप वैकल्पिक रूप से margin-left: -50pxMary Melody pointed out के रूप में उपयोग कर सकते हैं।
+0

बहुत बहुत धन्यवाद। उपरोक्त एक टिप्पणी नकारात्मक मार्जिन के साथ एक चाल भी उल्लेख करती है।तुम किसकी सिफारिश करना चाहोगे? यह भी भ्रमित है कि नकारात्मक मार्जिन का विभाजन समान नहीं होता है क्योंकि div को ऑफसेट करना होता है। इसके लिए कोई स्पष्टीकरण? – shaft

+2

@shaft शायद यह उदाहरण मैंने आपको समझने में मदद करेगा - http://jsfiddle.net/tqzxh0wo/ मार्जिन अन्य तत्वों को प्रभावित करेगा जबकि सापेक्ष स्थिति नहीं होगी। –

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