html - Child divs not wrapping to stay inside parent -


इस बेला पर एक नज़र डालें

html है:

  & lt; div id = "parent" style = "width: 150px; डिस्प्ले: इनलाइन-ब्लॉक; सफ़ेद-स्पेस: अबॉपर" & gt; & Lt; div id = "एक" वर्ग = "बच्चों" & gt; & LT; अवधि & gt; हाय के & lt; / span & gt; & Lt; / div & gt; & Lt; div id = "two" वर्ग = "बच्चों" & gt; & Lt; span & gt; बॉब अपने वायलिन पर खेलना चाहता है & lt; / span & gt; & Lt; / div & gt; & Lt; / div & gt; सीएसएस के साथ   

  #parent {background-color: #aaaaaa} #one {background-color: # ff0000} #two {background-color : # 00ff00} .kids {display: inline-block; पैडिंग: 2px; सफेद स्थान: सामान्य; }   

मैं कैसे div # दो लपेटो पहले बना सकता हूँ ताकि मैं माता-पिता div के अंदर दोनों बच्चे div रख सकूं?

बस माता-पिता से जुड़ी चौड़ाई को हटा दें। यह माता-पिता div को इसकी ऊंचाई बढ़ाने के लिए डिव #two में सामग्री को समायोजित करने के लिए मजबूर करता है। इसलिए पैरेंट डिवेल को इस तरह रखें:

  & lt; div id = "parent" style = "display: inline-block; white-space: nowrap" & gt;   

और यह आपके लिए चाल करना चाहिए।

वैकल्पिक रूप से, आप माता-पिता को एक न्यूनतम-ऊंचाई जोड़ सकते हैं, ताकि यह स्वचालित रूप से अपनी चौड़ाई के आधार पर समायोजित हो सके अपने बच्चे के भीतर सामग्री तो आपकी पैरेंट डिवि इस तरह दिख सकती है:

  & lt; div id = "parent" style = "min-width: 150px; डिस्प्ले: इनलाइन-ब्लॉक, व्हाइट-स्पेस: आइपॉड" & gt;   

आशा है कि यह मदद करता है !!!

संपादित करें: आपके बच्चे div पहले से ही माता-पिता div में लपेटता है। जब आप छोटे कोड को दो नाम से एक छोटे से चौड़ाई जोड़ते हैं तो यह 'पता चला' है।

यहां देखें:

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

इन फीड्स को देखें:

बच्चे के लिए निश्चित चौड़ाई, माता-पिता के लिए कोई चौड़ाई नहीं:

चाइल्ड डिव अपनी सामग्री के आकार के आधार पर लपेटता है: और

आशा है कि यह मदद करता है !!!

Comments

Popular posts from this blog

c - Mpirun hangs when mpi send and recieve is put in a loop -

python - Apply coupon to a customer's subscription based on non-stripe related actions on the site -

java - Unable to get JDBC connection in Spring application to MySQL -