बाहरी div को अपनी फ़्लोटिंग सामग्री

Question

के रूप में स्वचालित रूप से एक ही ऊंचाई बनाएं, मैं बाहरी div चाहता हूं, जो इसके div एस को इसके अंदर तैरने के लिए काला है। आईडी के साथ div में style='height: 200px का उपयोग नहीं करना चाहता क्योंकि मैं इसे अपनी सामग्री की ऊंचाई (उदाहरण के लिए, फ़्लोटिंग div एस) के रूप में रखना चाहता हूं।

<div id='outerdiv' style='border: 1px solid black;background-color: black;'> 
<div style='width=300px;border: red 1px dashed;float: left;'> 
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> 
</div> 

<div style='width=300px;border: red 1px dashed;float: right;'> 
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> 
</div> 

यह कैसे प्राप्त करने के लिए?

Answer 1

आप clear: both साथ अंत में एक तत्व जोड़कर इस

#outerdiv { 
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */ 
} 

तुम भी ऐसा कर सकते हैं करने के लिए outerdiv के सीएसएस सेट कर सकते हैं। इसे सामान्य रूप से जोड़ा जा सकता है, जेएस (एक अच्छा समाधान नहीं) या :after सीएसएस छद्म तत्व (पुराने आईईएस में व्यापक रूप से समर्थित नहीं) के साथ।

समस्या यह है कि कंटेनर स्वाभाविक रूप से फ़्लोट किए गए बच्चों को शामिल करने के लिए विस्तारित नहीं होंगे। पहले उदाहरण का उपयोग करने के साथ चेतावनी दीजिये, अगर आपके पास मूल तत्व के बाहर कोई बच्चा तत्व है, तो वे छिपाए जाएंगे। आप संपत्ति मूल्य के रूप में 'ऑटो' का भी उपयोग कर सकते हैं, लेकिन अगर कोई तत्व बाहर दिखाई देता है तो यह स्क्रॉलबार का आह्वान करेगा।

आप पैरेंट कंटेनर को तैरने का भी प्रयास कर सकते हैं, लेकिन आपके डिजाइन के आधार पर, यह असंभव/मुश्किल हो सकता है।

Answer 2

आप के रूप http://www.sitepoint.com/simple-clearing-of-floats/

पर विस्तृत जानकारी दी तो शायद कोशिश, स्वतः बंद होने वाले तैरता प्रयास कर सकते हैं या तो overflow: auto (आमतौर पर काम करता है), या overflow: hidden, के रूप में एलेक्स ने कहा।

Answer 3

सबसे पहले आप width=300px का उपयोग नहीं करते हैं जो कि सीएसएस नहीं टैग के लिए एक विशेषता सेटिंग है, इसके बजाय width: 300px; का उपयोग करें।

मैं #outerdiv पर clearfix तकनीक को लागू करने का सुझाव दूंगा। Clearfix 2 फ़्लोटिंग divs को साफ़ करने का एक सामान्य समाधान है, इसलिए पैरेंट div 2 फ़्लोटिंग divs को समायोजित करने के लिए विस्तारित होगा।

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'> 
    <div style='width:300px; float: left;'> 
     <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> 
    </div> 

    <div style='width:300px; float: left;'> 
     <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> 
    </div> 
</div> 

यहाँ अपनी स्थिति और क्या clearfix इसे सुलझाने के लिए करता है की एक example है।

Answer 4

सबसे पहले, मैं अत्यधिक अनुशंसा करता हूं कि आप इनलाइन करने के बजाए बाहरी सीएसएस फ़ाइल में अपनी सीएसएस स्टाइल करें। इसे बनाए रखना बहुत आसान है और कक्षाओं का उपयोग करके अधिक पुन: प्रयोज्य हो सकता है।

की "स्पष्ट साथ अंत में कोई तत्व जोड़: दोनों" एलेक्स के जवाब (& अटारी के clearfix) बंद काम करते हुए, आप यह बहुत की तरह कर सकते हैं:

<div id='outerdiv' style='border: 1px solid black; background-color: black;'> 
     <div style='width: 300px; border: red 1px dashed; float: left;'> 
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> 
     </div> 

     <div style='width: 300px; border: red 1px dashed; float: right;'> 
      <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> 
     </div> 
     <div style='clear:both;'></div> 
    </div> 

यह काम करता है (लेकिन जैसा कि आप इनलाइन देख सकते हैं सीएसएस इतना सुंदर नहीं है)।

Answer 5

उपयोग jQuery:

सेट जनक ऊँचाई = बाल offsetHeight।

$(document).ready(function() { 
    $(parent).css("height", $(child).attr("offsetHeight")); 
} 

Answer 6

उपयोग clear: both;

मैं एक सप्ताह यह पता लगाने की कोशिश खर्च!

Answer 7

मुझे पता है कि कुछ लोग मुझसे नफरत करेंगे, लेकिन मुझे इस मामले में सहायता के लिए display:table-cell मिला है।

यह वास्तव में साफ है।