सीएसएस का उपयोग करते हुए 2 कॉलम में विभाजित करें

Question

मैं सीएसएस का उपयोग करके एक div को दो कॉलम में विभाजित करने का प्रयास कर रहा हूं, लेकिन मैं इसे अभी तक काम करने में कामयाब नहीं हुआ हूं। मेरी मूल संरचना इस प्रकार है:

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

अगर मैं अपने संबंधित पदों (दाएं और बाएं) पर दाएं और बाएं डिवीजनों को फ्लोट करने का प्रयास करता हूं, तो यह सामग्री div की पृष्ठभूमि-रंग को अनदेखा करता है। और अन्य कोड जो मैंने विभिन्न वेबसाइटों से आज़माए हैं, वे मेरी संरचना में अनुवाद करने में सक्षम नहीं लगते हैं।

किसी भी मदद के लिए धन्यवाद!

Comments

बहुत सारे समाधान हैं, आप इसे देख सकते हैं: stackoverflow.com/questions/211383/…

— enmaai

Answer 1

जब आप उन दो विभाजनों को तैरते हैं, तो सामग्री div शून्य ऊंचाई तक गिर जाती है। बस जोड़ दो

<br style="clear:both;"/>

# सटीक div के बाद लेकिन content div के अंदर। यह सामग्री div को दो आंतरिक, अस्थायी div को घेरने के लिए मजबूर करेगा।

Comments

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

— जर्बद

Answer 2

यह मेरे लिए अच्छा काम करता है। मैंने स्क्रीन को दो हाफ में विभाजित किया है: 20% और 80%:

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>

Comments

यदि यह सब आप करते हैं, तो इन तत्वों के माता-पिता की कोई ऊंचाई नहीं होगी।

— tybro0103

आसान और प्रभावी। धन्यवाद!

— एलेक्सिस गामरा

Answer 3

ऐसा करने का एक और तरीका यह है overflow:hidden;कि फ्लोट किए गए तत्वों के मूल तत्व को जोड़ा जाए।

अतिप्रवाह: छिपे हुए तत्व फ्लोटेड तत्वों में फिट होने के लिए विकसित होंगे।

इस तरह, यह सब एक और html तत्व जोड़ने के बजाय css में किया जा सकता है।

Comments

मैं पाठकों को मेरा अन्य उत्तर भी जाँचने के लिए प्रोत्साहित करूँगा। मुझे लगता है कि यह वास्तव में इस एक से बेहतर है।

— tybro0103

एक और ध्यान दें: overflow:auto;कभी-कभी एक बेहतर विकल्प हो सकता है

— tybro0103

यह निश्चित रूप से एक प्रभावी साधन है। हालांकि, यह ध्यान देने योग्य है कि यह कुछ स्पष्ट लेआउट चुनौतियां पैदा कर सकता है। उदाहरण के लिए, यदि मैं चाहता हूं कि मेरे मूल तत्व का अतिप्रवाह दिखाई दे।

— जर्बद

Answer 4

ऐसा करने का सबसे लचीला तरीका:

#content::after {
  display:block;
  content:"";
  clear:both;
}

यह ठीक उसी तरह कार्य करता है जैसे # कॉन्टेंट में तत्व को जोड़ना:

<br style="clear:both;"/>

लेकिन वास्तव में एक तत्व जोड़ने के बिना। :: के बाद छद्म तत्व कहलाता है। यह एकमात्र कारण overflow:hidden;है कि # कॉन्टेंट में जोड़ने से बेहतर यह है कि आपके पास पूर्ण तैनात बाल तत्व अतिप्रवाह हो सकते हैं और फिर भी दिखाई दे सकते हैं। इसके अलावा यह बॉक्स-शैडो को अभी भी दिखाई देगा।

Comments

इसके अलावा एक महान समाधान है, लेकिन यह यहाँ ध्यान देने योग्य है कि यह IE8 में काम नहीं करता है। यह वास्तव में मुझे ऐसा कहने के लिए परेशान करता है और मैं "उस आदमी" होने के लिए माफी माँगता हूँ।

— जर्बद

@ जॉब की कोशिश #content:after(दो के बजाय सिर्फ एक कोलन) ... अगर मुझे सही से याद है, तो छद्म तत्वों के लिए दो कॉलोन का उपयोग करना अधिक उचित है, लेकिन पुराने IE केवल इसे पहचानते हैं यदि यह एक है। ... या ऐसा कुछ - यह काफी समय है क्योंकि मैंने उस मुद्दे से निपटा है।

— tybro0103

Answer 5

मूल प्रश्न के उत्तर में से कोई भी उत्तर नहीं दिया गया है।

सवाल यह है कि सीएसएस का उपयोग करके एक div को 2 कॉलम में कैसे अलग किया जाए।

उपरोक्त सभी उत्तर वास्तव में 2 कॉलम को अनुकरण करने के लिए 2 divs को एक ही div में एम्बेड करते हैं। यह एक बुरा विचार है क्योंकि आप किसी भी गतिशील फैशन में 2 कॉलम में सामग्री प्रवाहित नहीं कर पाएंगे।

इसलिए, उपर्युक्त के बजाय, एकल div का उपयोग करें जिसे सीएसएस का उपयोग करके 2 कॉलमों को परिभाषित किया गया है जो निम्नानुसार है ...

.two-column-div {
 column-count: 2;
}

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

Answer 6

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

यहाँ कुछ है जो सरल मामलों में काम करता है:

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

#left  { float:left;  }
#right { float:right; } 

यदि आप कुछ सामग्री डालते हैं तो आप देखेंगे कि यह काम करती है:

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

आप इसे यहाँ देख सकते हैं: http://cssdesk.com/d64uy

Answer 7

बच्चों को दिव्यांग बनाएं inline-blockऔर वे साथ-साथ रहेंगे।

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

डेमो देखें

Comments

मैं भी फ्लोट पर इस पद्धति को पसंद करता हूं। कभी-कभी एक सेट करने की आवश्यकता है: ऊर्ध्वाधर-संरेखित करें: शीर्ष; (या नीचे, आदि) बाएँ और दाएँ दोनों तत्वों पर यदि वे समान आकार के नहीं हैं।

— जेम्स

Answer 8

मुझे पता है कि यह पोस्ट पुरानी है, लेकिन अगर आप में से कोई अभी भी एक सरल समाधान की तलाश में है।

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}

Answer 9

एक div को लंबवत रूप से विभाजित करने का सबसे अच्छा तरीका -

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}

Answer 10

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

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}

<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>

Comments

इसी तरह के प्रयासों से, मुझे लगता है कि इसने (अब तक) सर्वश्रेष्ठ काम किया है। अन्य सभी जो मैंने पाया (और कोशिश की) सामग्री को अतिप्रवाह करता है । बहुत बहुत धन्यवाद।

— user12379095

Answer 11

फ्लोट प्रवाह को प्रभावित नहीं करते हैं। मुझे जो करना है वह है

<p class="extro" style="clear: both">possibly some content</p>

'रैपिंग डिवा' (इस मामले की सामग्री में) के अंत में। मैं यह कहकर इसे शब्दार्थ आधार पर सही ठहरा सकता हूं कि इस तरह के अनुच्छेद की आवश्यकता हो सकती है। एक और दृष्टिकोण एक स्पष्ट उपसर्ग का उपयोग करना है:

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

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

टिप्पणियों के साथ छल क्रॉस-ब्राउज़र संगतता के लिए है।

Answer 12

यह यहां सबसे अच्छा उत्तर दिया गया है प्रश्न 211383

इन दिनों, किसी भी स्वाभिमानी व्यक्ति को समाशोधन फ्लोट्स के "सूक्ष्म-स्पष्ट" दृष्टिकोण का उपयोग करना चाहिए।

Answer 13

1. पैरेंट DIV में फ़ॉन्ट का आकार शून्य के बराबर करें।

2. बच्चे के प्रत्येक DIV के लिए चौड़ाई% सेट करें।

   #content {
       font-size: 0;
   }
   
   #content > div {
       font-size: 16px;
       width: 50%;
   }
   

* सफारी में आपको इसे काम करने के लिए 49% सेट करने की आवश्यकता हो सकती है।

Comments

हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और वे लोग आपके कोड सुझाव के कारणों को नहीं जान सकते हैं।

— msrd0

Answer 14

एक विभाजन को दो स्तंभों में विभाजित करना बहुत आसान है, बस अपने कॉलम की चौड़ाई बेहतर निर्दिष्ट करें यदि आप इसे डालते हैं (जैसे चौड़ाई: 50%) और फ्लोट सेट करें: बाएं कॉलम के लिए छोड़ दिया और फ्लोट: दाएं कॉलम के लिए दाएं।

Comments

कृपया संबंधित टैग के साथ कुछ और जानकारी जोड़ें।

— अमन गर्ग

उम्मीद है कि यह कोड आपको इसे बेहतर तरीके से समझने में मदद करेगा; @AmanGarg CSS: #column { overflow:auto; width: 100%; } #column50pleft, #column50pright{ width: 49%; margin:2px; padding: 0.5%; background: white; } #column50pleft { float:left; } #column50pright { float:right; } HTML: <div id="column"> <div id="column50pleft"> </div> <div id="column50pright"> </div> </div>

— राशिद जोरवे