एक दूसरे के बगल में दो divs कैसे रखें?

Question

निम्नलिखित कोड पर विचार करें :

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

मैं चाहूंगा कि दोनों डिब्‍बों को रैपर डिव के अंदर एक दूसरे के बगल में रखा जाए। इस मामले में, ग्रीन डिव की ऊंचाई आवरण की ऊंचाई निर्धारित करनी चाहिए।

मैं इसे सीएसएस के माध्यम से कैसे प्राप्त कर सकता हूं?

Comments

इसके अलावा: stackoverflow.com/questions/446060/…

— radek

#wrapper { display: flex; }

— icl7126

CSS

— अलेक्जेंडर

Answer 1

एक या दोनों आंतरिक विभाजनों को फ्लोट करें।

फ्लोटिंग एक div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

या यदि आप दोनों तैरते हैं, तो आपको दोनों तैरते बच्चों को शामिल करने के लिए रैपर div को प्रोत्साहित करने की आवश्यकता होगी, या यह सोचेंगे कि यह खाली है और उनके चारों ओर सीमा नहीं डालनी है

फ्लोटिंग दोनों डिव:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

Comments

आप overflow:auto#wrapper पर सेट कर सकते हैं इसलिए आकार अभी भी सामग्री के आकार के अनुकूल होगा। (एक स्पष्ट की जरूरत के बिना: दोनों तत्व)

— Meo

हां एक उदाहरण में, अगर # प्यास अधिक लंबी है, तो आप निश्चित रूप से - जिसमें 101 ईएच हो सकती है;) .. # सेकेंड पर छिपा हुआ ओवरफ्लो एक बाएं मार्जिन की गणना करने से बचता है, हालांकि अन्यथा समाधान मूल रूप से समान हैं

— clairuzuzy

बिल्कुल सही! मैं मार्जिन की गणना नहीं करना चाहता। overflow: hiddenयहाँ एक महान काम करता है! हालांकि, यह अभी भी मेरे लिए जादू की तरह है। मैंने सोचा था कि अगर यह अपने कंटेनर में फिट नहीं है तो सामग्री overflow: hiddenको छिपाना चाहिए । लेकिन, यहां व्यवहार थोड़ा अलग है। क्या आप कृपया उस पर विस्तार कर सकते हैं?

— मीशा मोरशको

overflowसंपत्ति साफ हो जाएगा तैरता दोनों ऊर्ध्वाधर और क्षैतिज जिसके कारण मेरा पहला उदाहरण में, #secondएक बाईं मार्जिन की जरूरत नहीं है, अतिप्रवाह संपत्ति के रूप में लंबे समय तक यह के मूल्य के रूप में काम करता है नहीं है visible.. मैं सिर्फ मामले परिदृश्यों इसलिए में उन लोगों के लिए स्वत: करने के लिए छिपा पसंद करते हैं एक स्क्रॉल बार दुर्घटना से उत्पन्न नहीं होता है (जो ऑटो करेगा) .. किसी भी तरह से कोई भी सामग्री इस तरह से छिपी नहीं होगी क्योंकि यह केवल तब छिपी होगी जब यह आपकी 500px चौड़ाई के बाहर जाती है, लेकिन जब तक कोई ऊंचाई सामग्री नहीं होगी चौड़ाई में सामान्य के रूप में लपेटो .. कोई छुपा नहीं;)

— clairesuzy

अतिप्रवाह: # तरंग पर छिपा # समतल फ्लोट को समाहित करने के लिए कार्य करता है, यह गैर-फ्लोट किए गए # सेकंड से अधिक लंबा होना चाहिए। # सेकेंड पर दूसरा ओवरफ्लो पहले फ़्लोट के बगल में सामग्री को रखने के लिए कार्य करता है, क्षैतिज रूप से अन्यथा यह पहली फ़्लोट के नीचे जाएगा। अतिप्रवाह संपत्ति के विस्तारित व्यवहार को CSS2.1 में कहीं चरणबद्ध किया गया था, ऐनक एक समाशोधन तत्व या एक स्पष्ट उप हैक के बिना तैरने के तरीके के जवाब में खुद को बदल दिया, यह तकनीकी शब्द है कि जब इस तरह का उपयोग किया जाता है तो यह एक नया बनाता है ब्लॉक प्रारूपण संदर्भ

— clairesuzy

Answer 2

दो विभाग होने पर,

<div id="div1">The two divs are</div>
<div id="div2">next to each other.</div>

आप displayसंपत्ति का उपयोग भी कर सकते हैं:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

jsFiddle उदाहरण यहां ।

यदि div1एक निश्चित ऊँचाई से अधिक है, तो तल पर div2अगला रखा जाएगा div1। इसे हल करने के लिए, vertical-align:top;पर उपयोग करें div2।

jsFiddle उदाहरण यहां ।

Comments

@ स्वीकृत जवाब में फ़्लोट प्रॉपर्टी का उपयोग किया जाता है, जिसे प्रमुख ब्राउज़रों द्वारा डिस्प्ले प्रॉपर्टी से पहले समर्थन किया गया था। क्रोम v1.0 से फ्लोट और v4.0 से डिस्प्ले का समर्थन करता है। जिस समय यह लिखा गया था, शायद स्वीकृत उत्तर अधिक पीछे-संगत था।

— jim_kastrin

इस समाधान में एक कष्टप्रद मुद्दा है: चूंकि divs बनाये जाते हैं इसलिए inlineआपको अपने HTML में उनके बीच कोई रिक्त स्थान, नई रेखाएँ आदि नहीं रखनी चाहिए। अन्यथा, ब्राउज़र उनके बीच एक स्थान प्रदान करेगा। इस फिडेल को देखें : आप दोनों divको एक ही पंक्ति में रखने का प्रबंधन नहीं कर सकते, जब तक कि आप उनके टैग को बिना किसी चीज़ के बीच में न रखें।

— अलेक्जेंडर अबाकुमोव

Answer 3

आप सीएसएस फ्लोट संपत्ति का उपयोग करके एक दूसरे के बगल में तत्वों को बैठ सकते हैं:

#first {
float: left;
}
#second {
float: left;
}

आपको यह सुनिश्चित करने की आवश्यकता होगी कि रैपर div चौड़ाई के संदर्भ में फ्लोटिंग के लिए अनुमति देता है, और मार्जिन आदि सही तरीके से सेट किए गए हैं।

Answer 4

फ्लेक्सबॉक्स मॉडल का उपयोग करने का प्रयास करें। यह लिखना आसान और छोटा है।

लाइव Jsfiddle

सीएसएस:

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

डिफ़ॉल्ट दिशा पंक्ति है। तो, यह #wrapper के अंदर एक दूसरे के बगल में संरेखित करता है। लेकिन यह IE9 या उस संस्करणों से कम समर्थित नहीं है

Comments

मैं विश्वास नहीं कर सकता कि इसका उपयोग कितना आसान है flex। धन्यवाद!

— सैम

Answer 5

यहाँ समाधान है:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
    float: left;
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}

आपका डेमो अपडेट किया गया;

http://jsfiddle.net/dqC8t/1/

Comments

धन्यवाद। अगर मैं छोड़ता हूं तो overflow: auto;यह अभी भी काम करता है। क्या आप एक उदाहरण दे सकते हैं जहाँ इसकी आवश्यकता है?

— मिशा मोरोस्को

हां सुनिश्चित करें: ओवरफ्लो ऑटो को हटा दें और पहले की सामग्री को फिर से दूसरी सामग्री बनाएं, आप अच्छी तरह से देखते हैं कि कंटेनर का आकार केवल एडाप्ट करता है, जब आप उस पर ओवरफ्लो ऑटो सेट करते हैं, या यदि आप एक क्लियरिंग तत्व का उपयोग करते हैं: jsfiddle। net / dqC8t / 3

— meo

ठीक है, मैं देख रहा हूँ, धन्यवाद! हालाँकि, मुझे यह पसंद नहीं आया margin: 0 0 0 302px;क्योंकि यह निर्भर करता है width: 300px;। लेकिन फिर भी धन्यवाद!!

— मीशा मोरशको

अगर आपको

— meo

Answer 6

विकल्प 1

float:leftदोनों divतत्वों पर प्रयोग करें और 100% की संयुक्त चौड़ाई वाले दोनों div तत्वों के लिए% चौड़ाई सेट करें ।

box-sizing: border-box;फ्लोटिंग डिव तत्वों पर प्रयोग करें । मूल्य बॉर्डर-बॉक्स गद्दी और सीमाओं को विस्तार करने के बजाय चौड़ाई और ऊंचाई में मजबूर करता है।

<div id="wrapper">फ्लोटिंग चाइल्ड एलिमेंट्स को क्लियर करने के लिए क्लीयरफिक्स का इस्तेमाल करें जो रैपर डिव स्केल को सही ऊंचाई तक पहुंचाएगा।

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

http://jsfiddle.net/dqC8t/3381/

विकल्प 2

उपयोग position:absoluteएक तत्व पर और दूसरे तत्व पर निश्चित चौड़ाई।

स्थिति जोड़ें: <div id="wrapper">तत्व को बाल तत्व बनाने के लिए तत्व के सापेक्ष <div id="wrapper">।

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    border: 1px solid red;
    width:100px;
}
#second {
    border: 1px solid green;
    position:absolute;
    top:0;
    left:100px;
    right:0;
}

http://jsfiddle.net/dqC8t/3382/

विकल्प 3

display:inline-blockदोनों पर प्रयोग करेंdivतत्वों और 100% की संयुक्त चौड़ाई वाले दोनों div तत्वों के लिए% चौड़ाई सेट ।

और फिर से ( float:leftउदाहरण के रूप में ) box-sizing: border-box;दिव्य तत्वों पर उपयोग करें । मूल्य बॉर्डर-बॉक्स गद्दी और सीमाओं को विस्तार करने के बजाय चौड़ाई और ऊंचाई में मजबूर करता है।

नोट: इनलाइन-ब्लॉक तत्वों में रिक्ति के मुद्दे हो सकते हैं क्योंकि यह HTML मार्कअप में रिक्त स्थान से प्रभावित होता है। अधिक जानकारी यहाँ: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}

#first {
    width:50%;
    border: 1px solid red;
    display:inline-block;
}

#second {
    width:50%;
    border: 1px solid green;
    display:inline-block;
}

http://jsfiddle.net/dqC8t/3383/

अंतिम विकल्प फ्लेक्स नाम के नए प्रदर्शन विकल्प का उपयोग करना होगा, लेकिन ध्यान दें कि ब्राउज़र संगतता खेलने के लिए आ सकती है:

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Comments

माना; floatमेरी नाव तैरना मत। inline-blockचट्टानों। (क्षमा करें।)

— स्टीविन्क

Answer 7

एक दूसरे के सामने दो विभाजनों को रखने के लिए नीचे दिए गए कोड परिवर्तनों का उपयोग करने का प्रयास करें

#wrapper {
  width: 500px;
  border: 1px solid black;
  display:flex;
}

JSFiddle लिंक

Answer 8

यह बहुत आसान है - आप इसे कठिन तरीके से कर सकते हैं

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

या आसान तरीका है

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

वहाँ भी एक लाख अन्य तरीकों की तरह है।
लेकिन मैं सिर्फ आसान तरीका है। मैं आपको यह भी बताना चाहूंगा कि यहां बहुत सारे उत्तर गलत हैं लेकिन दोनों ही तरीके जो मैंने HTML 5 में कम से कम काम दिखाए हैं।

Answer 9

यह सही CSS3 का उत्तर है। उम्मीद है कि यह आप अब किसी भी तरह मदद करता है: डी मैं वास्तव में किताब पढ़ने के लिए आप की सिफारिश: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 असल में मैं अब इस किताब को पढ़ने से यह समाधान बना दिया है । : डी

#wrapper{
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}
#first{
  width: 300px;
  border: 1px solid red;
}
#second{
  border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

Answer 10

1. float:left;दोनों डिवीजनों में संपत्ति जोड़ें ।

2. display:inline-block;संपत्ति जोड़ें ।

3. display:flex;माता-पिता में संपत्ति जोड़ें ।

Answer 11

मेरा दृष्टिकोण:

<div class="left">Left</div>
<div class="right">Right</div>

सीएसएस:

.left {
    float: left;
    width: calc(100% - 200px);
    background: green;
}

.right {
    float: right;
    width: 200px;
    background: yellow;
}

Answer 12

#wrapper {
width: 1200;
border: 1px solid black;
position: relative;
float: left;
}
#first {
width: 300px;
border: 1px solid red;
position: relative;
float: left;
}
#second {
border: 1px solid green;
position: relative;
float: left;
width: 500px;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

Answer 13

सामग्री यूआई और react.js में आप ग्रिड का उपयोग कर सकते हैं

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>

</Grid>