फ्लोट के बिना तरफ से div तरफ

Question

मैं div 'left' और 'दाएं' को कॉलम की तरह कैसे दिख सकता हूं?

मैं जानता हूँ कि मैं नाव का उपयोग कर सकते हैं: उन पर छोड़ दिया और कहा कि काम करेंगे ... लेकिन यहाँ http://www.barelyfitz.com/screencast...s/positioning/ में कदम 5 और 6 पर पुरुष यह संभव है कहते हैं, मैं इसे हालांकि काम ...

नहीं मिल सकता है

कोड:

<style> 
div.left { 
    background:blue; 
    height:200px; 
    width:300px; 
} 

div.right{ 
    background:green; 
    height:300px; 
    width:100px; 
} 

.container{ 
    background:black; 
    height:400px; 
    width:450px; 
} 
</style> 

<div class="container"> 
     <div class="left"> 
      LEFT 
     </div> 
     <div class="right"> 
      RIGHT 
     </div> 
</div> 

Answer 1

सामान्य विधि के लिए मार्जिन के साथ कोशिश कर सकते हैं 0 उपयोग करने के लिए है: http://www.jsfiddle.net/zygnz/1/

.container div { 
    display: inline-block; 
} 

हालांकि अपनी सीमाएं ध्यान दें है: पहला गुट के बाद एक अतिरिक्त जगह नहीं है - दो मायने रखता है के बीच इस वजह से दो ब्लॉकों अब अनिवार्य रूप से inline तत्वों, a और em की तरह हैं, तो खाली स्थान के। यह आपके लेआउट को तोड़ सकता है और/या अच्छा नहीं लग सकता है, और मैं इस काम के लिए पात्रों के बीच सभी सफेद जगहों को बाहर नहीं करना चाहूंगा।

अधिकांश मामलों में फ्लोट भी अधिक लचीला होते हैं।

Answer 2

आप जब float रों का उपयोग नहीं कर सही div

margin: -200px 0 0 350px; 

Answer 3

ए divblock level element है, जिसका अर्थ है कि यह एक ब्लॉक के रूप में व्यवहार करेगा, और ब्लॉक बिना किसी फ्लोट किए पक्ष में रह सकते हैं। आप फिर भी उन लोगों के साथ inline elements करने के लिए सेट कर सकते हैं:

display:inline-block; 

इसे आज़मा कर देखें ...

---

एक और तरीका है का उपयोग कर उन्हें जगह है:

position:absolute; 
left:0; 

और/या

position:absolute; 
right:0; 

नोट: इसके लिए अपेक्षित काम करने के लिए, रैपर तत्व में position:relative; होना चाहिए ताकि पूर्ण स्थिति वाले तत्व उनके रैपर तत्व से संबंधित रहें।

Answer 4

आप CSS3 flexbox लेआउट का भी उपयोग कर सकते हैं, जो आजकल well supported है।

.container { 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: space-between; 
    background:black; 
    height:400px; 
    width:450px; 
} 

.left { 
    flex: 0 0 300px; 
    background:blue; 
    height:200px; 
} 

.right { 
    flex: 0 1 100px; 
    background:green; 
    height:300px; 
} 

See Example & flexbox के बारे में Learn more (अधिकतम संगतता के लिए विरासत शैलियों के साथ)।

Answer 5

मैं वर्तमान में इस पर काम कर रहा हूं, और मेरे पास पहले से ही कई समाधान हैं। उच्च गुणवत्ता वाली साइट होना अच्छा है, कि मैं अपनी सुविधा के लिए भी उपयोग कर सकता हूं। क्योंकि यदि आप इन चीजों को नीचे नहीं लिखते हैं, तो आप अंततः कुछ हिस्सों को भूल जाएंगे। और यदि आप किसी भी प्रकार के नए प्रोग्रामिंग/डिज़ाइन शुरू कर रहे हैं तो मैं कुछ मूलभूत नीचे लिखने की भी सिफारिश कर सकता हूं।

तो यदि फ्लोट फ़ंक्शंस समस्याएं पैदा कर रहे हैं तो कुछ विकल्प हैं जिन्हें आप आजमा सकते हैं।

एक div टैग में div संरेखण को संशोधित करता है, तो <div class="kosher" align=left> यदि यह आपके अनुरूप नहीं है तो ऐसा मार्जिन के साथ एक और विकल्प है।

.leftdiv { 
    display: inline-block; 
    width: 40%; 
    float: left; 
} 
.rightdiv { 
    display: block; 
    margin-right: 20px; 
    margin-left: 45%; 
} 

<div align=left> को हटाने के लिए मत भूलना। .Left और .Right के बीच की जगह को हटाने के लिए

Answer 6

उपयोग display:table-cell;

div.left { 
 
    background:blue; 
 
    height:200px; 
 
    width:300px; 
 
} 
 

 
div.right{ 
 
    background:green; 
 
    height:300px; 
 
    width:100px; 
 
} 
 

 
.container{ 
 
    background:black; 
 
    height:400px; 
 
    width:450px; 
 
} 
 

 
.container > div { 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div> 
 
    <div class="left"> 
 
     LEFT 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div class="right"> 
 
     RIGHT 
 
    </div> 
 
    </div> 
 
</div>