2012-06-23 13 views
16

सीएसएस में, क्या मैं इनलाइन-ब्लॉक की ऊंचाइयों को रेखांकित कर सकता हूं?सीएसएस में, क्या मैं इनलाइन-ब्लॉक की ऊंचाइयों को रेखांकित कर सकता हूं?

मैंने मार्जिन को ऑटो और 0 तक ऊंचाई सेट करके सोचा था कि ब्लॉक उपलब्ध स्थान पर फिट होने के लिए विस्तारित होगा, लेकिन यह अभी भी ब्लॉक के चारों ओर कसकर लपेटता है।

.myclass { 
    display: inline-block; 
    margin: 0em; 
    padding: 1em; 
    height: auto; 
    border: solid; 
} 

http://jsfiddle.net/6NQDw/

मैं दोनों बक्से की तरह एक ही ऊंचाई होने के लिए, लेकिन div चौड़ाई/ऊंचाइयों उनकी सामग्री द्वारा निर्धारित किया जाना, पिक्सेल में एक चौड़ाई/ऊंचाई नहीं निर्दिष्ट करने चाहते हैं।

क्या कोई प्रकार का पैडिंग/मार्जिन/संरेखण सीएसएस या ऐसा कुछ है जिसे मैं उपयोग कर सकता हूं?

उत्तर

23

यदि आप शुद्ध सीएसएस समाधान की आवश्यकता है तो आप display:table-cell; का उपयोग कर सकते हैं लेकिन ध्यान दें कि यह आईई 7 में काम नहीं करेगा (मुझे लगता है कि आईई 6 अब पूरी तरह से भुला दिया गया है)।

.myclass { 
    display: table-cell; 
    margin: 0em; 
    padding: 1em; 
    height: auto; 
    border: solid; 
} 

Cross browser support for display:table-cell

को प्राप्त करने के लिए क्या आप की जरूरत जावास्क्रिप्ट हालांकि स्पष्ट रूप से गतिशील सामग्री के साथ कंटेनर की चौड़ाई की स्थापना है के लिए आपका सबसे अच्छा शर्त लगभग हमेशा गलत तरीका है।

+7

'इनलाइन-ब्लॉक' आईई 7 में ब्लॉक तत्वों के लिए काम नहीं करता है, इसलिए मुझे लगता है कि आईई 7 समर्थन की आवश्यकता नहीं है। – BoltClock

+0

अच्छी तरह से यकीन है कि मैं सिर्फ विकल्प पेश कर रहा हूं। – brezanac

+1

टेबल-सेल आकर्षक है (क्या यह तालिका के बाहर उपयोग करना ठीक है?), लेकिन क्या .myclass ब्लॉक के बीच स्थान को संरक्षित करने का कोई तरीका है? जब मैंने टेबल-सेल पर स्विच किया, तो यह दूरी को ध्वस्त कर दिया, और मार्जिन जोड़ने से सीमा रेखाओं के बीच कोई जगह नहीं लगती। http://jsfiddle.net/6NQDw/18/ –

0

आप बॉक्स को एक-दूसरे की ऊंचाई से मेल खाने के लिए display: table-cell; का उपयोग कर सकते हैं।

0

यदि आप आईई 7 के लिए समर्थन चाहते हैं, तो आप इनलाइन-ब्लॉक या टेबल-सेल का उपयोग नहीं कर सकते हैं।

बस उपयोग फ्लोट: सुरक्षित रहने के लिए छोड़ दिया ...

अन्यथा तुम सिर्फ IE7 के लिए एक अलग सीएसएस का उपयोग कर भूमि जाएगा।

+0

मुझे नहीं लगता कि फ्लोट या तो समान ऊंचाई प्राप्त करता है। http://jsfiddle.net/6NQDw/17/ –

+0

यदि आप जानते हैं कि दो बक्से के अंदर क्या अपेक्षा की जानी है, तो आप केवल "myclass" में "ऊंचाई" जोड़ सकते हैं। हालांकि, यदि आप उम्मीद करते हैं कि बक्से के अंदर की सामग्री बदल सकती है, तो यह आईई 7 में ठीक करने का मुद्दा होगा।एसओ पर – Geocrafter

-1

lte ie8 के लिए स्टाइल शीट जोड़ने में आसान है, अपनी गुणों को प्रदर्शित करने के लिए रीसेट करें: ब्लॉक, फ्लोट: बाएं, और 100% की बजाय कुल चौड़ाई 99% से बाहर करें। यह आपको हर तरह की आवश्यक कार्यक्षमता देगा।

+2

हम कोड साझा करते हैं, क्या आप अपना उत्तर संपादित कर सकते हैं ताकि यह मूल पोस्टर प्रश्नों के लिए तैयार हो? – Anthony

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

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