सीएसएस चौड़ाई एटिब्यूट

का उपयोग कर div की पिक्सेल चौड़ाई सेट नहीं कर सकता है, मैं एक div स्थापित करने की कोशिश कर रहा हूं जिसमें 4 divs हैं। मैं कंटेनर की चौड़ाई और कुछ निश्चित divs को सेट सेट करने के लिए सेट करना चाहता हूं लेकिन वे सामग्री की चौड़ाई लेते हैं।सीएसएस चौड़ाई एटिब्यूट

<html> 
<head> 
    <style> 
div { 
    border: 1px solid #888; 
} 

.container { 
    width: 300px; 
    position: relative; 
} 

.container div { 
    display: inline; 
    } 

.div1 { 
    width: 20px; 
    overflow: hidden; 
} 
.div2 { 
    width: 80px; 
    overflow: hidden; 
} 
.div3 { 
    width: 160px; 
    overflow: hidden; 
} 
.div4 { 
    width: 20px; 
    overflow: hidden; 
    position: absolute; 
    top:0px; 
    right: 0px; 
} 
    </style> 
</head> 
<body> 

<div class="container"> 
    <div class="div1"><img src="1x1.gif" width="1" height="1"/></div> 
    <div class="div2"><span>date</span></div> 
    <div class="div3"><span>text</span></div> 
    <div class="div4"><span>twistie</span></div>  
</div>  
</body> 
</html>

परिणाम इस प्रकार है:

+--+----+----+------------------------+---+ 
| |date|text|      |twi| 
+--+----+----+------------------------+---+

किसी को भी क्यों बाएं हाथ divs आवश्यक चौड़ाई के लिए सेट नहीं किया जा रहा है व्याख्या कर सकते हैं?

स्रोत

2010-11-02 paul

क्या ये कॉलम हेडर बनने के लिए हैं? ऐसा लगता है कि एक टेबल अधिक उपयुक्त हो सकता है। – meagar

कॉलम हेडर नहीं। शैलियों के रूप में एक टेबल का उपयोग नहीं करना चाहते हैं * शायद * महत्वपूर्ण रूप से बदल सकता है ... – paul

मुझे लगता है कि यह प्रदर्शन की वजह से है: इनलाइन शैली इस प्रयास करें:

<div style='width:100px;overflow:hidden;'> 
<div style='float:left;width:20px'></div> 
<div style='float:left;width:20px'></div> 
<div style='float:left;width:20px'></div> 
<div style='clear:both;'></div> 
</div>

स्रोत

2010-11-02 13:56:11 heximal

+1 ऐसा लगता है कि चाल चल रही है! किसी को स्पष्टीकरण ;-) – paul

इनलाइन तत्व आपके द्वारा निर्दिष्ट किसी भी चौड़ाई या ऊंचाई का उपयोग नहीं करते हैं। –

.container { 
    float: left; 
    width: 300px; 
    position: relative; 
} 

.container div { 
    float: left; 
}

चाल करना चाहिए। इंटीरियर divs पर इनलाइन डिस्प्ले निकालें, और छोड़ दिया सभी divs तैरना। फिर आप divs की चौड़ाई और उनके बीच किसी भी मार्जिन निर्दिष्ट कर सकते हैं।

स्रोत

2010-11-02 13:58:10

रूप

.container div { 
    display: inline-block; 
    }

इस प्रकार आप इनलाइन करने के लिए कंटेनर div सेट करते हैं

अपने सीएसएस बदलें, आप सक्रिय रूप से अपने बच्चों के सभी के साथ-साथ इनलाइन करने के लिए सेट है, तो आप के रूप में अच्छी बस <span> s का उपयोग करके हो सकता है।

यहां देखने के लिए एक उदाहरण है।

http://jsfiddle.net/Kyle_Sevenoaks/ZwKDb/

स्रोत

2010-11-02 14:00:05 Kyle

कारण आप चौड़ाई निर्धारित नहीं कर सकते क्योंकि आप display:inline; की स्थापना कर रहे हैं।

जब तत्व इनलाइन प्रदर्शित होते हैं, तो उनके आयाम निर्दिष्ट नहीं हो सकते हैं क्योंकि तत्व का आकार इसके भीतर पाठ की लंबाई से निर्धारित होता है।

डिफ़ॉल्ट रूप से, <div> टैग display:block; पर सेट हैं। इस मोड में इसकी ऊंचाई और चौड़ाई निर्दिष्ट हो सकती है, लेकिन पिछले ब्लॉक के नीचे प्रदर्शित होने के लिए डिफ़ॉल्ट है।

वहाँ आप के लिए यह चारों ओर दो तरीके हैं:

उपयोग display:block; और float:left; - यह चल तत्वों, जिसका अर्थ है कि बाद के तत्वों उनके आसपास लपेटो जाएगा में ब्लॉक बदल जाएगा। जब अन्य ब्लॉक के साथ प्रयोग किया जाता है, तो यह आपको प्रभावी रूप से उन्हें लाइन करने की अनुमति देता है। हालांकि float का उपयोग करके मैंने अप्रत्याशित साइड इफेक्ट्स का उपयोग किया है, जो मैंने वर्णित लपेटने वाले प्रभाव के कारण किया है।
उपयोग display:inline-block; - यह इस सवाल का मेरे पसंदीदा समाधान है। inline-blockblock और inline के बीच आधे रास्ते का घर मोड है। यह दस्तावेज़ तत्व के प्रयोजनों के लिए एक तत्व को इनलाइन के रूप में माना जा सकता है, लेकिन फिर भी आंतरिक रूप से एक ब्लॉक की तरह व्यवहार करता है, जिसमें यह हमेशा आयताकार होगा और आप ऊंचाई और चौड़ाई निर्दिष्ट करने में सक्षम हैं आदि। इसमें कुछ quirks (आईई 6 में सबसे महत्वपूर्ण रूप से खराब समर्थन), लेकिन सामान्य रूप से जो आप प्राप्त करने की कोशिश कर रहे हैं, उसके लिए यह एक बहुत साफ समाधान है और float के अजीब दुष्प्रभाव नहीं हैं।

आशा है कि मदद करता है।

स्रोत

2010-11-02 14:23:27 Spudley

सीएसएस चौड़ाई एटिब्यूट

उत्तर

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