2011-03-07 18 views
25

मैं किसी प्रकार की उपयोगिता बार विकसित करना चाहता हूं। मैं float:left;दाईं ओर एक div कंटेनर

का उपयोग कर इस बार में प्रत्येक तत्व को स्थिति में रख सकता हूं लेकिन मैं चाहता हूं कि दूसरा तत्व बार के दाईं ओर स्थित हो। यह मेरे लिए मुश्किल है क्योंकि बार की चौड़ाई स्थिर नहीं है।

मेरी डेमो पर एक नज़र डालें: http://jsfiddle.net/x5vyC/2/

यह इस तरह दिखना चाहिए:

enter image description here

किसी भी विचार कैसे इस सीएसएस का उपयोग कर प्राप्त करने के लिए?

+1

आप इस तरह मतलब है? http://jsfiddle.net/x5vyC/6/ उत्तर के रूप में पोस्ट नहीं होगा क्योंकि यह बहुत आसान लगता है। – Loktar

उत्तर

58

क्या यह आप चाहते थे? - http://jsfiddle.net/jomanlk/x5vyC/3/

दोनों पक्षों पर तैरता अब

#wrapper{ 
    background:red; 
    overflow:auto; 
} 

#c1{ 
    float:left; 
    background:blue; 
} 

#c2{ 
    background:green; 
    float:right; 
}​ 

<div id="wrapper"> 
    <div id="c1">con1</div> 
    <div id="c2">con2</div> 
</div>​ 
+8

हम फ्लोट – bhawin

+3

का उपयोग किए बिना ऐसा कर सकते हैं ऐसा करने का एकमात्र अन्य तरीका एक रिश्तेदार कंटेनर के अंदर ब्लॉक को बिल्कुल स्थिति में रखेगा। – JohnP

8
  • उपयोग float: right .. करने के लिए फ्लोट करने के लिए दूसरा स्तंभ .. सही।
  • फ्लोट को साफ़ करने के लिए overflow: hidden का उपयोग करें ताकि पृष्ठभूमि रंग जो मैंने अभी डाला है वह दिखाई देगा।

Live Demo

#wrapper{ 
    background:#000; 
    overflow: hidden 
} 
#c1 { 
    float:left; 
    background:red; 
} 
#c2 { 
    background:green; 
    float: right 
} 
संबंधित मुद्दे