2012-10-10 7 views
8

किसी सीएसएस तालिका में, क्या कोई मेरी मदद कर सकता है समझें कि पहले कॉलम में एक गद्देदार तत्व दूसरे कॉलम में एक div को प्रभावित करेगा?प्रदर्शन क्यों है: अन्य कक्षों में तत्वों से प्रभावित तालिका-कक्ष

यहां एक उदाहरण है जहां एक अनुच्छेद में पैडिंग सेट है। दाहिनी कॉलम में डीआईवी भी-सही ढंग से गद्देदार है। बाएं कॉलम सामग्री पर लाइन-ऊंचाई निर्दिष्ट करते समय मुझे इसी तरह की समस्याएं थीं लेकिन इस प्रश्न के लिए उदाहरण को सरल बना दिया गया।

http://jsfiddle.net/APXT7/2/

इसी तरह के कई/संबंधित तालिका सेल के बारे में सवाल कर रहे हैं, लेकिन मैं एक है कि विशेष रूप से इस प्रश्न को संबोधित नहीं पा सके।

+0

दिलचस्प। मैंने कभी ऐसा प्रभाव नहीं देखा था। –

+0

मुझे यकीन नहीं है कि मैं सवाल समझता हूं। आप क्या होने की उम्मीद कर रहे हैं? – j08691

+0

@ j08691 मैं सही 'सेल' में पाठ के ऊपर का अंतर नहीं चाहता हूं। मैं वास्तव में यह पृष्ठभूमि छवि के साथ एक div होना चाहता हूं लेकिन समस्या को प्रदर्शित करने के लिए उदाहरण में यह सरल है –

उत्तर

4

यह पैडिंग में से एक की बजाय लाइन ऊंचाई का एक मुद्दा है। इसका मतलब है कि, हालांकि आपको संदेह हो सकता है कि वास्तव में आपके दाहिनी कॉलम पर कोई पैडिंग प्रचारित नहीं किया जा रहा है (गणना मूल्य अभी भी शून्य है)। मैं अभी भी तत्वों पर पैडिंग समायोजित करने के लिए इसे दुष्प्रभाव कहूंगा।

आपके p तत्वों के ऊपर और नीचे पैडिंग उनके आधार रेखा को नीचे धक्का देती है। यह उसी पंक्ति/पंक्ति पर अन्य "कोशिकाओं" की आधार रेखा को भी स्थानांतरित करने का कारण बनता है। बेशक, आप spec में उल्लिखित सभी नटी किरकिरा पा सकते हैं, लेकिन चूंकि दोनों "कोशिकाओं" में एक ही लंबवत संरेखण (baseline) है, इसलिए उन्हें स्थानांतरित होने पर उन्हें लाइन करना होगा।

+0

मैं आपके जवाब को स्वीकार करने के लिए बाध्य महसूस करता हूं क्योंकि आपने एक महान स्पष्टीकरण दिया है ... हालांकि अब मैं अनुवर्ती 'कोशिकाओं' में लाइन-ऊंचाई को समायोजित करने के लिए सबसे अच्छा तरीका के रूप में अनुवर्ती प्रश्न के साथ छोड़ दिया गया है। ऐसा लगता है कि सही सेल केवल सही सेल में पहले तत्व से प्रभावित होता है। [अद्यतन jsfiddle] (http://jsfiddle.net/nickpearce/qnCkd/1)। मैं एक नया सवाल बनाउंगा। –

9

आप शायद सेल क्लास पर लंबवत-संरेखण गुण (vertical-align:top) या jsfiddle.net/j08691/APXT7/4 जैसे div का उपयोग कर सकते हैं। चूंकि ये divs तालिका कक्षों के रूप में प्रदर्शित किए जा रहे हैं, यह वही हो सकता है जो आप खोज रहे हैं।

+1

धन्यवाद @ j08691; यह निश्चित रूप से मेरे अनुवर्ती प्रश्न का उत्तर देता है लेकिन सख्त होने के लिए पहला जवाब 'क्यों?' के मेरे मूल प्रश्न को संबोधित करता है। –

1

मुझे एक हैक मिला जो "ठीक करता है" लेकिन पता नहीं क्यों। <div class='cell'> के अंदर पहली चीज़ <div class='hack'>&nbsp;</div> कक्षा हैक .hack { height: 0; } रखती है यह बाएं या दाएं सेल में रखे जाने पर काम करता है

+0

मुझे विश्वास है कि आपका जवाब अब इरादे के रूप में प्रदर्शित होता है। यदि आवश्यक हो तो आप अधिक [संपादित करें] के लिए स्वतंत्र हैं। जवाब के लिए धन्यवाद! –

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