2012-08-25 12 views
6

मैं काफी सीएसएस के लिए नया हूँ, इसलिए, यह मूर्खतापूर्ण लग सकता है:सीएसएस फ्लोट संपत्ति कोई ऊंचाई नहीं दिखाती है?

सीएसएस में, मैं एक सामग्री पड़ोसी तत्व के लिए छोड़ दिया स्थिति float:left को संपत्ति का उपयोग करें, अब, मैं सभी तत्वों के लिए एक कंटेनर है उस फ्लोट संपत्ति है। मैं parenting तत्व को इसकी सामग्री के अनुसार अपनी ऊंचाई समायोजित कैसे करूं?

HTML:

<div id="page"> 
<div id="side"> 
    <p>my sidebar</p> 
</div> 
<div id="content"> 
    <p>my content</p> 
    <p>my content1</p> 
    <p>my content2</p> 
    <p>my content3</p> 
</div> 

सीएसएस

/* the "border:3px solid #000;" are used to make the div border visble*/ 
#page{ 
position:relative; 
width:400px; 
background-color: #F4F0EC; 
border:3px solid #000; 
} 
#side{ 

border:3px solid #000; 
float:left; 
} 
#content{ 
float:left; 
border:3px solid #000; 
} 
ऊपर के साथ

, <div id="page"> देखो यह कैसा 0px की ऊंचाई है .... मैं कैसे कर सकता हूँ यह सामग्री warp ??

के बाद से मैं सीएसएस के लिए नया हूँ, कृपया समझा मैं गलत क्या कर रहा हूँ, धन्यवाद

फिडल: http://jsfiddle.net/AuSmP/

उत्तर

11

आप अपने div #page जो यह उसकी सामग्री को फिट करने के लिए आकार बदलने के लिए अनुमति देगा के लिए overflow:hidden जोड़ सकते हैं।

See Working Demo.

Learn more about overflow property.

वैकल्पिक रूप से आप भी <div class="clear"></div> जोड़ सकते हैं और उसके बाद CSS.clear{clear:both;} एक ही प्राप्त करने के लिए।

See Demo.

+0

दोस्त, मैं कभी भी एक नई सीएसएस विशेषता के बारे में जानने में इतनी खुश नहीं हूं! बहुत बहुत धन्यवाद! –

3

निरपेक्ष के सापेक्ष से स्थिति बदलने से आप मदद कर सकते हैं
चेक इस JSFiddle Demo

+0

इस मुद्दे के अन्य विकल्प के लिए +1 :) – freebird

3

यह आप क्या उम्मीद है? http://jsfiddle.net/AuSmP/4/ बस फ्लोट जोड़ें: # पृष्ठ पर बाएं शैली चाल को ठीक करेगी, या आप स्पष्ट भी उपयोग कर सकते हैं: नीचे

+0

अच्छा जवाब एलेक्स .... इसे जारी रखें ... – Wazzzy

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