सीएसएस पृष्ठभूमि रंग

Question

चलो कहते हैं कि हम इस बहुत ही सरल परिदृश्य

<div class="content"> 
    <div class="left"> 
     <p>some content</p> 
    </div> 
    <div class="right"> 
     <p>some content</p> 
    </div> 
</div> 

<div class="content"> 
    <div class="left"> 
     <p>some content</p> 
    </div> 
    <div class="right"> 
     <p>some content</p> 
    </div> 
</div> 

है और यह स्टाइल है दो:

.content { 
    width: 960px; 
    height: auto; 
    margin: 0 auto; 
    background: red; 
    clear: both; 
} 

.left { 
    float: left; 
    height: 300px; 
    background: green; 
} 

.right { 
    float: right; 
    background: yellow; 
} 

और बात है ... जब मैं यह करने के लिए सामग्री जोड़ने पैरेंट div को नीचे खींचना चाहिए, और हमें लाल पृष्ठभूमि को देखने की ज़रूरत है ... बात यह है कि, मैं लाल पृष्ठभूमि को सभी ऊंचाई को भर नहीं सकता।

कोई विचार ???

उन्नत में एक टन धन्यवाद।

संपादित करें:here is a fiddle to test

Answer 1

जब बच्चे के तत्व तैरते हैं, तो उन्हें दस्तावेज़ के प्रवाह से बाहर निकाला जाता है। ऐसा करने में, माता-पिता ने अब आयामों को परिभाषित नहीं किया है, क्योंकि बच्चे तकनीकी रूप से अंतरिक्ष पर कब्जा नहीं कर रहे हैं। इस प्रकार, मूल तत्व स्वयं पर गिर जाता है। वही बात तब होती है जब बच्चों के तत्वों को पूरी तरह से स्थितिबद्ध करते हैं।

इस उदाहरण में, हम इसे मूल तत्व में overflow:hidden जोड़कर इसे ठीक कर सकते हैं, इस प्रकार इसे बच्चों के तत्वों को शामिल करने के लिए मजबूर कर सकते हैं। वैकल्पिक रूप से overflow:auto भी काम करता है। कुछ सुझाव दे सकते हैं कि यह overflow:hidden से भी बेहतर है क्योंकि आप यह बताने में सक्षम होंगे कि कोई गणना बंद है या नहीं।

jsFiddle example

.content { 
    overflow:hidden; 
} 

अब पेरेंट तत्व नहीं रह गया है संकुचित हो जाता है और लाल रंग की पृष्ठभूमि दिख रहा है।

यदि आप पुराने ब्राउज़र में समर्थन की तलाश में हैं तो आप वैकल्पिक रूप से एक स्पष्टफिक्स का उपयोग कर सकते हैं, लेकिन मैं ऐसा करने की अनुशंसा नहीं करता हूं।

Answer 2

कैसे सभी divs पर 0 करने के लिए अपने मार्जिन और गद्दी की स्थापना के बारे में?

Answer 3

कोशिश एचटीएमएल लेआउट में वर्ग नाम के लिए सभी कोष्ठक को बंद करने और सीएसएस संपत्ति जोड़ने के लिए float:left .Content वर्ग के सीएसएस शैली http://jsfiddle.net/u3W79/

Answer 4

मैं सामग्री कंटेनर के अंत में एक खाली स्पष्ट div उपयोग करने के लिए

जोड़ा सीएसएस:

.clear { 
    clear: both; 
} 

HTML:

<div class="content"> 
    <div class="left"> 
     <p>some content</p> 
    </div> 
    <div class="right"> 
     <p>some content</p> 
    </div> 
    <div class="clear"></div> 
</div>