सीएसएस दो divs एक दूसरे के बगल में

Question

मैं <div>एक दूसरे के बगल में दो एस रखना चाहता हूं । दाईं ओर <div>लगभग 200px है; और बाईं ओर <div>स्क्रीन की शेष चौड़ाई भरनी चाहिए? मैं यह कैसे कर सकता हूँ?

Answer 1

आप अपनी वस्तुओं को रखने के लिए फ्लेक्सबॉक्स का उपयोग कर सकते हैं :

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

यह मूल रूप से फ्लेक्सबॉक्स की सतह को केवल स्क्रैप कर रहा है। Flexbox बहुत आश्चर्यजनक चीजें कर सकता है।

---

पुराने ब्राउज़र समर्थन के लिए, आप इसे सुलझाने के लिए CSS फ्लोट और एक चौड़ाई के गुणों का उपयोग कर सकते हैं ।

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Comments

यह वास्तव में सही उत्तर है, संक्षिप्त है, और - वर्तमान में इसके ऊपर के दो के विपरीत - पूरी तरह से आत्म-निहित है। SO पर सर्वश्रेष्ठ उत्तर केवल इस तरह के होने चाहिए, IMO। +1

— बॉबी जैक

यह जानने के लिए कि वामपंथी होने की आवश्यकता क्यों है float:left? मेरे उत्तर के लिए आपकी टिप्पणी कहती है, 'द लेफ्ट डिव के लिए सभी बायें क्षेत्र की अवधि की आवश्यकता होती है', लेकिन float:leftयह सामग्री को कसकर लपेटने का कारण होगा।

— बाज़

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

— मुसहर

लेकिन एक बात ध्यान दें कि इनलाइन-ब्लॉक IE के पुराने संस्करणों में काम नहीं करेगा ...

— Mussser

@Mussser मैं आपकी टिप्पणी से सहमत हूं लेकिन ध्यान रखें कि यह उत्तर 2009 से आता है ... एक समय जब आप "Ie के पुराने संस्करण" कहते हैं (यानी: IE8 और अंडर) IE के "वर्तमान" संस्करण थे ...

— लॉरेंट एस

Answer 2

मुझे नहीं पता कि यह अभी भी एक मौजूदा मुद्दा है या नहीं, लेकिन मुझे सिर्फ एक ही समस्या का सामना करना पड़ा और सीएसएस display: inline-block;टैग का उपयोग किया । इनको एक डीप में लपेटना ताकि उन्हें उचित रूप से तैनात किया जा सके।

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

ध्यान दें कि इनलाइन शैली विशेषता का उपयोग केवल इस उदाहरण की संक्षिप्तता के लिए किया गया था बेशक इनका उपयोग बाहरी सीएसएस फ़ाइल में किया गया हो।

Comments

मेरे लिए यही समाधान था। मैं चाहता था कि दो तलाक आसन्न हों जैसे कि [] [] (जब से मैंने यह किया है ..) =) यश।

— कण्टक

इस एक ने मेरे लिए भी काम किया। मुझे एक और फ़्लोट के साथ कुछ समस्याएँ थीं: राईट डिव अपने दाहिने कॉलम डिव को बायीं ओर नीचे धकेलते हुए, इसलिए मैंने कंटेनर का उपयोग प्रदर्शन भी किया: इनलाइन-ब्लॉक, और इसने इसे हल कर दिया।

— मार्टिन कार्नी

Content1 DIV में सामग्री बड़ी होने पर यह काम नहीं करता है। इसका नतीजा यह है कि डीआईवाई अगल-बगल की बजाय दो अलग-अलग लाइनों पर हैं।

— रिचर्ड हॉलिस

@ रीचर्डहॉलिस मैं widthएक दूसरे को एक नई पंक्ति में लपेटने से रोकने के लिए अपने सभी 2 डिव की संपत्ति को एक दूसरे के बगल में सेट करने में सक्षम था।

— १०:१० बजे त्रिंदाज

सीएसएस को लंबवत-संरेखित करें: शीर्ष; यदि सामग्री की लंबाई भिन्न होती है, तो भी दोनों एक-दूसरे को धक्का देंगे

— भावी

Answer 3

दुर्भाग्य से, सामान्य मामले के समाधान के लिए यह कोई तुच्छ बात नहीं है। सबसे आसान बात एक सीएसएस शैली की संपत्ति को जोड़ना होगा "फ्लोट: सही;" हालांकि, आपकी 200px div, यह भी आपके "मुख्य" -Div का कारण होगा वास्तव में पूरी चौड़ाई और कोई भी पाठ 200px-div के किनारे पर तैरता होगा, जो अक्सर अजीब लगता है, सामग्री के आधार पर (बहुत अधिक छोड़कर सभी मामलों में अगर यह एक अस्थायी छवि है)।

EDIT: जैसा कि DOM द्वारा सुझाया गया है, रैपिंग की समस्या को निश्चित रूप से एक मार्जिन के साथ हल किया जा सकता है। मुझे मूर्ख।

Comments

'फ्लोट: लेफ्ट' अधिक उपयुक्त होगा, लेफ्ट डिवा को बाएं क्षेत्र के सभी स्पैन की आवश्यकता होती है। कोई अपराध नहीं था, बस विचार करें।

— MN

Answer 4

@Roe और @MohitNanda द्वारा सुझाई गई विधि काम करती है, लेकिन यदि सही div सेट है float:right;, तो इसे HTML स्रोत में पहले आना चाहिए। यह बाएं से दाएं पढ़ने के क्रम को तोड़ता है, जो भ्रमित हो सकता है अगर पृष्ठ प्रदर्शित शैलियों के साथ बंद हो। यदि ऐसा है, तो एक रैपर div और पूर्ण स्थिति का उपयोग करना बेहतर हो सकता है:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

प्रदर्शन:

बाएँ दांए

संपादित करें: हम्म, दिलचस्प। पूर्वावलोकन विंडो सही ढंग से स्वरूपित divs दिखाती है, लेकिन प्रदान की गई पोस्ट आइटम नहीं करती है। क्षमा करें, आपको इसे अपने लिए आज़माना होगा।

Answer 5

मैं आज इस समस्या में भाग गया। उपरोक्त समाधानों के आधार पर, इसने मेरे लिए काम किया:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

बस पैरेंट डिव को पूरी चौड़ाई में फैलाएं और उनके भीतर मौजूद डिव को फ्लोट करें।

Answer 6

अपडेट करें

यदि आपको तत्वों को एक पंक्ति में रखने की आवश्यकता है, तो आप फ्लेक्स लेआउट का उपयोग कर सकते हैं । यहां आपके पास एक और फ्लेक्स ट्यूटोरियल है । यह एक बेहतरीन सीएसएस उपकरण है और भले ही यह 100% संगत नहीं है, प्रत्येक दिन इसका समर्थन बेहतर हो रहा है। यह निम्नानुसार काम करता है:

एचटीएमएल

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

सीएसएस

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

और जो आपको यहां मिलता है वह कुल 4 इकाइयों के साथ एक कंटेनर है, जो 1/4 और 3/4 के संबंध में अपने बच्चों के साथ अंतरिक्ष साझा करता है।

मैंने CodePen में एक उदाहरण दिया है जो आपकी समस्या को हल करता है। मुझे उम्मीद है यह मदद करेगा।

http://codepen.io/timbergus/pen/aOoQLR?editors=110

बहुत पुराना

शायद यह सिर्फ एक बकवास है, लेकिन क्या आपने एक मेज के साथ कोशिश की है? यह सीधे divs की स्थिति के लिए CSS का उपयोग नहीं करता है, लेकिन यह ठीक काम करता है।

आप एक 1x2 तालिका बना सकते हैं और अपने divsअंदर डाल सकते हैं, और फिर सीएसएस के साथ तालिका को स्वरूपित कर सकते हैं जैसे आप चाहते हैं:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

ध्यान दें

यदि आप तालिका का उपयोग करने से बचना चाहते हैं, तो जैसा कि पहले कहा गया है, आप उपयोग कर सकते हैं float: left;और float: right;निम्नलिखित तत्व में, स्थिति को साफ करने के लिए ए clear: left;, clear: right;या जोड़ना न भूलें clear: both;।

Comments

टेबल्स कभी-बदलते "फ्लोट" की तुलना में बहुत अधिक पूर्वानुमान योग्य समाधान हैं जो हमेशा तत्वों को जोड़ने या हटाने पर कुछ गड़बड़ करते हैं।

— कोकोडको

यदि आप ईमेल के साथ काम कर रहे हैं तो यह एक अच्छा समाधान है।

— Zac क्लैंसी

Answer 7

div1 {
    float: right;
} 
div2 {
    float: left;
}

जब तक आप clear: bothइस दो स्तंभ ब्लॉक को अलग करने वाले तत्व के लिए सेट करते हैं, तब तक यह ठीक काम करेगा ।

Comments

फ़्लोट्स का उपयोग करते समय, आपको चौड़ाई गुण सेट करना होगा। इसलिए मुझे नहीं लगता कि यह एक अच्छा समाधान है ..

— मार्टिज़न

Answer 8

मैं उसी समस्या में भाग गया और मोहित संस्करण काम करता है। यदि आप html में अपने बाएं-दाएं क्रम को रखना चाहते हैं, तो बस यह प्रयास करें। मेरे मामले में, बाएं div आकार समायोजित कर रहा है, दाईं ओर की चौड़ाई 260px है।

एचटीएमएल

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

सीएसएस

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

चाल मुख्य बॉक्स पर एक सही पैडिंग का उपयोग करने के लिए है, लेकिन उस बॉक्स को मार्जिन-राइट के साथ फिर से सही बॉक्स रखकर फिर से उपयोग करें।

Comments

मुझे फ्लोट के बिना काम करना नहीं आता: ठीक है।

— जूसी पालो

Answer 9

मैं फ्लोट और अतिप्रवाह-एक्स के मिश्रण का उपयोग करता हूं: छिपा हुआ। न्यूनतम कोड, हमेशा काम करता है।

https://jsfiddle.net/9934sc4d/4/ - इसके अलावा आपको अपना फ्लोट खाली करने की आवश्यकता नहीं है!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

Comments

उपयोगी है जब आप डिव की ऊँचाई जानते हैं और आप जानते हैं कि यह सामग्री लंबी नहीं है तो यह ऊँचाई है। हालांकि, जब div की ऊंचाई से अधिक सामग्री होती है, तो यह छिपा हुआ है, अतिप्रवाह के कारण ...

— Martijn

यह वास्तव में बेहतर है :)

— Martijn

अच्छा! गैर-प्रतिक्रियात्मक नकारात्मक प्रतिक्रिया के बजाय उपयोगी और सकारात्मक प्रतिक्रिया के साथ लोगों को खिलाते हुए देखने के लिए अच्छा है। अच्छा आदमी @Martijn

— टोनी रे Tansley

इसके लिए शुक्रिया। मैं अपने UI का अधिकांश कार्य रिएक्टिव नेटिव में करता हूं और फ्लेक्स बॉक्स HTML + CSS (मेरी राय में) की तुलना में बहुत बेहतर है। इससे मेरा जीवन बहुत आसान हो गया।

— एरिक वीनर

Answer 10

जैसा कि सभी ने बताया है, आप float:right;आरएचएस सामग्री और एलएचएस पर एक नकारात्मक मार्जिन सेट करके ऐसा करेंगे ।

हालाँकि .. यदि आप float: left;LHS (जैसा कि मोहित करता है) पर प्रयोग नहीं करते हैं, तो आपको एक कदम आगे बढ़ना पड़ेगा क्योंकि LHS div अभी भी लेआउट में मार्जिन की जगह का उपभोग करने वाली है।

हालाँकि .. LHS फ़्लोट सामग्री को छोटा कर देगा, इसलिए आपको एक परिभाषित चौड़ाई चाइल्डनोड डालने की आवश्यकता होगी यदि वह स्वीकार्य नहीं है, जिस बिंदु पर आपने माता-पिता की चौड़ाई को परिभाषित किया होगा।

हालांकि .. जैसा कि डेविड बताते हैं कि आप LHS फ्लोट की आवश्यकता से बचने के लिए मार्कअप के रीड-ऑर्डर को बदल सकते हैं, लेकिन इसकी पठनीयता और संभवतः पहुंच के मुद्दे हैं।

हालाँकि .. इस समस्या को कुछ अतिरिक्त मार्कअप दिए गए फ़्लोट्स से हल किया जा सकता है

(चेतावनी: मैं उस उदाहरण पर .clearing div का अनुमोदन नहीं करता, विवरण के लिए यहां देखें)

सभी बातों पर विचार किया गया, मुझे लगता है कि हम में से अधिकांश चाहते हैं कि एक गैर-लालची चौड़ाई थी: CSS3 में शेष ...

Answer 11

यह सभी के लिए उत्तर नहीं होगा, क्योंकि यह IE7- में समर्थित नहीं है, लेकिन आप इसका उपयोग कर सकते हैं और फिर IE7- के लिए वैकल्पिक उत्तर का उपयोग कर सकते हैं। यह डिस्प्ले है: टेबल, डिस्प्ले: टेबल-पंक्ति और डिस्प्ले: टेबल-सेल। ध्यान दें कि यह लेआउट के लिए तालिकाओं का उपयोग नहीं कर रहा है, लेकिन स्टाइल divs है ताकि चीजें ऊपर से सभी झंझटों को अच्छी तरह से रेखाबद्ध करें। मेरा एक HTML5 ऐप है, इसलिए यह बहुत अच्छा काम करता है।

यह लेख एक उदाहरण दिखाता है: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

यहाँ आपकी स्टाइलशीट कैसी दिखेगी:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

Answer 12

मेरी वेबसाइट में से कुछ को समान बनाने के लिए:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

Comments

मुझे नहीं, लेकिन मुझे लगता है कि सीएसएस हैक, संक्रमणकालीन सिद्धांत, या स्पष्टीकरण की कमी होगी?

— अन्नकूट

कम से कम इसका एक सिद्धांत था :) मुझे लगता है कि यह लोग IE पर हाशिये के लिए ब्राउज़र हैक पसंद नहीं कर सकते हैं। कम से कम मैंने इसका परीक्षण किया ...

— रोलैंड शॉ

यह बहुत हैक है। वहाँ बहुत सारे समाधान हैं जो बहुत अधिक संक्षिप्त हैं।

— जॉन बेल

@ जॉनबेल शायद समय के साथ समस्या है - यह उस समय (8 साल पहले) एक उचित समाधान था, लेकिन ब्राउज़र तकनीक तब से आगे बढ़ी है। वेरेडली के कुछ अन्य उत्तर मेरे समकालीन हैं, जो एक ही विचार का प्रस्ताव रखते हैं, उन्होंने बेहतर स्कोर किया (जैसे कि डेविड का, दो मिनट बाद मेरा)

— रोलैंड शॉ

Answer 13

बस एक z- सूचकांक का उपयोग करें और सब कुछ अच्छा बैठेगा। निश्चित या निरपेक्ष के रूप में चिह्नित पदों के लिए सुनिश्चित करें। फिर कुछ भी फ्लोट टैग की तरह नहीं घूमेगा।