इनलाइन-ब्लॉक तत्व एक और इनलाइन-ब्लॉक तत्व में नेस्ट एक offsetTop

Question

मैं नया सीखने एचटीएमएल हूँ और अब मैं

<div id="container" style="height:300px;width:500px;font-size:0"> 
    <div id="leftBox" style="display: inline-block; background: pink; width: 50%; height: 100%;"> 
     <div id="wrapper" style="height:10%;"> 
      <div style="display: inline-block; background: red; width: 50%; height: 100%;"></div> 
      <div style="display: inline-block; background: blue; width: 50%; height: 100%;"></div> 
     </div> 
    </div> 
    <div id="rightBox" style="display: inline-block; background: green; width: 50%; height: 100%;"></div> 
</div> 

जैसे कुछ कोड है है (और मैं इसे http://jsfiddle.net/Simon_Chan/Z3WyA/ पर पोस्ट)

आप leftBox देख सकते हैं एक बड़ा offsetTop है, लेकिन अगर कोई wrapperयाwrapper की ऊंचाई 100% या है कोई rightBoxया कोई elemen है wrapper में टीएस इन सभी स्थितियों में leftBox में कोई ऑफसेट नहीं है।

ऐसा क्यों करें? और इसे कैसे निकालें?

धन्यवाद!

Answer 1

समस्या आप #leftBoxया#rightBox

कारण के लिए vertical-align:top जोड़ने की जरूरत है ठीक करने के लिए कि डिफ़ॉल्ट vertical-align मूल्य baseline जो

की आधारभूत के साथ बॉक्स की आधारभूत संरेखित करता है पैरेंट बॉक्स

पैरेंट बॉक्स की आधार रेखा नीचे है डिब्बा।

Baseline रूप

लाइन जिस पर सबसे पत्र "बैठो" और जो नीचे descenders

सभी मामलों का विस्तार आप आधारभूत में सवाल परिणाम में वर्णन परिवर्तन किया जा रहा परिभाषित किया गया है जो संरेखित करता है वांछित तत्वों।

बेसलाइन का एक अच्छा उदाहरण निम्न कोड है जिसमें आपके रैपर <div> में कोई तत्व नहीं है लेकिन इसके बजाय बहुत बड़ा फ़ॉन्ट-आकार टेक्स्ट है। आप देख सकते हैं कि हरी<div> के नीचे आधारभूत माता पिता की (लाल बिंदीदार सीमा <div>) और कैसे गुलाबी<div> पाठ इसे करने के लिए ले जाने के लिए बनाता है के लिए गठबंधन किया है, जहां पाठ यह माता पिता पर बैठे बेसलाइन।

<div style="height:300px;width:500px;font-size:0;border:1px dotted red"> 
    <div style="display: inline-block; background: pink; width: 50%; height: 100%;"> 
     <div style="height:100%;font-size:150px">foo</div> 
    </div> 
    <div style="display: inline-block; background: green; width: 50%; height: 100%;"></div> 
</div> 

Answer 2

ऐसा इसलिए होता है क्योंकि विभिन्न बॉक्स बेसलाइन पर बैठते हैं। समस्या को हटाने का सबसे आसान तरीका उन्हें लंबवत रूप से संरेखित करना है। जैसे div {vertical-align:top }

यह देखने के लिए कि डिफ़ॉल्ट रूप से इनलाइन-ब्लॉक बॉक्स बेसलाइन पर कैसे बैठते हैं http://jsfiddle.net/veCEf/ देखें। ध्यान दें कि किसी भी सामग्री के बिना इनलाइन-ब्लॉक डिव बक्से को बेसलाइन पर बैठे अपने बॉक्स के नीचे कैसे होता है, जबकि एक बार उनकी सामग्री होती है, तो उनकी सामग्री का निचला आधार आधार पर बैठता है।