सीएसएस - चौड़ाई टैग पर सम्मानित नहीं किया गया

Question

मुझे अपने एक स्पैन के साथ कोई समस्या है। मेरी कोड में

.form_container .col1che 
{ 
float: left; 
width: 4%; 
text-align: left;  
} 

.form_container .col2che 
{ 
float: left; 
width: 80%; 
text-align:left; 
} 

.form_container .col3che 
{ 
float: right; 
width: 13%; 
text-align:right; 
} 

ये 3 फैला: निम्नलिखित शैलियों cosider कृपया

<div class="row"><!-- start: "row" --> 
    <span class="col1che">   
      <?php //some db feeds ?>   
    </span> 
    <span class="col2che"> 
      <?php //some db feeds ?> 
    </span> 
    <span class="col3che"> 
      <?php //some db feeds ?> 
    </span> 
    <div class="clear"></div> 
</div><!-- end: "row" --> 

समस्या तब होती है "COL1CHE" में प्रदर्शित करने के लिए कोई डाटा नहीं है जब वहाँ (या शायद उनमें से किसी में हालांकि मुझे यकीन नहीं है) जब कोई डेटा नहीं है तो यह अवधि "ध्वस्त हो जाती है" और इसकी चौड़ाई को सम्मानित नहीं किया जाता है। यह फ़ायरफ़ॉक्स में होता है, आईई में यह "पतन" नहीं होता है।

मैंने यह देखने के लिए एक "स्पष्ट" कक्षा शामिल की है कि यह मदद करता है लेकिन इसका कोई फायदा नहीं हुआ है।

कोई विचार?

Answer 1

display: block मदद तुम यहाँ क्योंकि जब नाव सक्रिय होता है, तत्वों स्वचालित रूप से मोड ब्लॉक करने के लिए, स्विच किया गया है जो कुछ भी अपनी प्रारंभिक मोड, तो अपनी चौड़ाई काम करना चाहिए नहीं होंगे।

समस्या खाली <span> टैग जो कुछ अस्पष्ट नियम मुझे याद नहीं की वजह से रेंडर नहीं किया जा सकता है के साथ हो सकता है। सामग्री खाली होने पर आपको   जोड़कर, अपने खाली होने से रोकने की कोशिश करनी चाहिए।

Answer 2

यह काम बस शैली के लिए

display: block; 

जोड़ने बनाने के लिए।

Answer 3

अवधि एक इनलाइन तत्व है और इसलिए आप चौड़ाई निर्धारित नहीं कर सकते हैं। चौड़ाई निर्धारित करने के लिए आपको पहले इसे

display:block; 

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

display:inline-block; 

Answer 4

चौड़ाई सम्मानित नहीं है, क्योंकि अवधि एक इनलाइन तत्व है। इसे ठीक करने के जोड़ें:

display: inline-block; 

अपनी स्थिति के आधार पर, display: inline-blockdisplay: block की तुलना में बेहतर हो सकता है अवधि के बाद कोई सामग्री एक नई लाइन पर मजबूर नहीं किया जाएगा क्योंकि।

Answer 5

प्रदर्शन block और वैकल्पिक रूप से नाव left मुझे मदद की।

display: block; 
float: left;