फ्लोट

का उपयोग करते समय डिव पतन मेरे पास निम्न HTML है और मैं बटन और टेक्स्ट के पीछे नीली पृष्ठभूमि प्रदर्शित करना चाहता हूं। दुर्भाग्य से, निम्नलिखित कोड के साथ, नीली पृष्ठभूमि गायब हो जाती है। अगर मैं आईड्स बटन और टेक्स्ट के लिए सीएसएस को हटा देता हूं, तो पृष्ठभूमि वापस आ गई है।फ्लोट

मैं क्या गलत कर रहा हूं?

धन्यवाद!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <style> 


    #actions 
    { 
     background: blue; 
    } 

    #buttons 
    { 
     float: left; 
    } 

    #text 
    { 
     float: right; 
    } 

    </style> 
</head> 
<body> 

     <div id="actions"> 
      <div id="buttons"> 
       <input type="button" id="btnOne" value="Bla bla" /> 
       <input type="button" id="btnTwo" value="Bla bla bls" /> 
      </div> 
      <div id="text">Bla bla bla</div> 
     </div> 

</body> 
</html>

स्रोत

2009-03-12 Martin

@ ओरियल - यह प्रश्न मार्च 12, 200 9 को खोला गया था। दूसरा प्रश्न 14 जनवरी, 2010 को खोला गया था। 14 जनवरी, 2010 को खोला गया सवाल डुप्लिकेट होना चाहिए, न कि यह। – Martin

मैंने इस सवाल को बंद कर दिया और दूसरा नहीं क्योंकि दूसरा अधिक "लोकप्रिय" (अधिक वोट, विज़िट और पसंदीदा) है। ध्यान दें कि डुप्लिकेट के रूप में एक प्रश्न बंद होने में कुछ भी गलत नहीं है। – Oriol

आपको अपनी फ्लोट को "साफ़" करना होगा। फ़्लोटिंग तत्व उन्हें पृष्ठ की सामान्य ब्लॉक स्थिति से बाहर ले जाते हैं, इसलिए एक तत्व जो फ़्लोट किया जाता है, वह मूल कंटेनर से बाहर निकलता है, जिससे div को ध्वस्त कर दिया जाता है। आप उन्हें साफ कर सकते हैं, या अधिक संक्षिप्त और चालाक रास्ता जोड़ने के लिए है: पैरेंट कंटेनर के लिए 'अतिप्रवाह ऑटो':

#actions 
{ 
    background: blue; overflow: auto; 
} 

#buttons 
{ 
    float: left; 
    overflow: hidden; 
} 

#text 
{ 
    float: right; 
    overflow: hidden; 
}

के बाद से "अतिप्रवाह: ऑटो" कुछ मामलों में स्क्रॉलबार उत्पादन कर सकते हैं, मैं आमतौर पर स्पष्ट रूप से है कि रोकने के बच्चों के तत्वों पर 'ओवरफ्लो: छुपा' निर्दिष्ट करके। यह मेरे अनुभव में भरोसेमंद काम करता है। तैरता है और उन्हें साफ करने के बारे

स्रोत

2009-03-12 18:42:14 guns

वाह! यह काम करता हैं! धन्यवाद! : डी – Martin

इस प्रयास करें:

<div id="actions"> 
     <div id="buttons"> 
      <input type="button" id="btnOne" value="Bla bla" /> 
      <input type="button" id="btnTwo" value="Bla bla bls" />     
     </div> 
     <div id="text">Bla bla bla</div> 
     <div style="clear:both;height:1px;overflow:none;"></div> 
    </div>

बुनियादी समस्या यह है कि अस्थायी तत्वों कंटेनर की गणना की ऊंचाई के लिए योगदान नहीं है। इस प्रकार div # क्रियाओं की कोई ऊंचाई नहीं होती है जब अन्य दो divs तैरते हैं।

स्रोत

2009-03-12 18:40:20 Joel

आईई और एफएफ में काम नहीं करता है। – Martin

क्षमा करें। गलत जगह में div था। – Joel

अधिक जानकारी: http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/

स्रोत

2009-03-12 19:04:55 AaronSieb

एक गैर जारी तत्व किसी भी ऊंचाई अगर यह केवल जारी तत्व शामिल नहीं होगा। फ़्लोट किए गए तत्वों को फैलाने और घूमने के लिए बाहरीतम तत्व को मजबूर करने के लिए इसे भी फ़्लोट किया जाना चाहिए। इस समस्या का सरल जवाब 'क्रियाओं' div को भी तैरना है- यह अपेक्षित पृष्ठभूमि को बढ़ाएगा।

फ़्लोट किए गए तत्वों को साफ़ करने के लिए नीचे एक अतिरिक्त तत्व जोड़ना अनावश्यक है और अर्थपूर्ण नहीं है इसलिए इसे निराश किया जाना चाहिए।

स्रोत

2009-03-27 05:43:13

उत्तर

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