अगल-बगल ये दो तलाक कैसे मिलेंगे?

110

मेरे पास दो divs हैं जो नेस्टेड नहीं हैं, एक दूसरे के नीचे। वे दोनों एक पैरेंट डिव के भीतर हैं, और यह पेरेंट डिव खुद को दोहराता है। तो अनिवार्य रूप से:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

मैं प्रत्येक जोड़ी को child_div_1और child_div_2एक दूसरे के बगल में लाना चाहता हूं । मैं यह कैसे कर सकता हूँ?

css layout html

— जस्टिन मेल्टज़र
स्रोत

82

#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Http://jsfiddle.net/c6242/1/ पर कार्यशील उदाहरण देखें

— हुसैन
स्रोत

1

वह चाहता है कि बच्चे एक-दूसरे के बगल में संरेखित हों, न कि माता-पिता (कम से कम मेरी समझ ...)

— ehdv

4

मुझे अभी भी लगता display: table-cellहै कि वह जो भी मतलब है, उसके करीब परिणाम लाएगा (तब से उनके पास समान ऊंचाई होगी) लेकिन यह तरीका निश्चित रूप से काम करेगा।

— ehdv

@ehdv display: table-cellIE6 IE7 में समर्थित नहीं है। बाईंओर तैरना; ऐसा करने का उचित तरीका है।

— हुसैन

वास्तव में IE6,7 में ऐसा करने का उचित तरीका है <tr><td>, क्योंकि उपयोगकर्ता द्वारा विंडो का आकार बदलने पर कोई अन्य विकल्प टूट जाएगा। आधुनिक ब्राउज़रों में, display: inline-blockआमतौर पर सबसे अच्छा विकल्प होता है।

— जॉन हेन्केल

126

चूंकि डिवॉल्ट बाय डिफॉल्ट blockएलिमेंट हैं - मतलब वे पूरी तरह से उपलब्ध चौड़ाई पर कब्जा कर लेंगे, उपयोग करने की कोशिश करें -

display:inline-block;

divअब प्रदान की गई है इनलाइन यानी तत्वों के प्रवाह को बाधित नहीं करता, लेकिन अभी भी एक ब्लॉक तत्व के रूप में माना जाएगा।

मुझे यह तकनीक floatएस के साथ कुश्ती की तुलना में आसान लगती है ।

इस ट्यूटोरियल को और देखें - http://learnlayout.com/inline-block.html । मैं पिछले लेखों की भी सिफारिश करूंगा, जो उस तक ले जाएंगे। (नहीं, मैंने इसे नहीं लिखा था)

— रॉबिन माबेन
स्रोत

मुझे यह समाधान वास्तव में पसंद आया। इसके साथ मेरी एकमात्र समस्या यह है कि शीर्ष संरेखित करने के बजाय दोनों divs के नीचे संरेखित है। क्या इसके लिए भी कोई त्वरित सेटिंग है?

— क्रिस

मेरा सुझाव है कि 2 रैपर divसमान ऊँचाई वाले होते हैं, तो उनके अंदर की सामग्री शीर्ष-संरेखित प्रतीत होगी।

— रॉबिन माबेन

2

मैं सहमत हूँ। यह बहुत बेहतर है float:leftक्योंकि यह आपको अपने पूरे लेआउट को फिर से परिभाषित किए बिना इतने अधिक विकल्प देता है। चीजें "बस काम" इस तरह से। इसे यहाँ देखें: jsfiddle.net/SrAQd/4

— जैरी

12

वर्टिकल अलाइनमेंट प्राप्त करने के लिए मैं "वर्टिकल-अलाइन: टॉप;"

— cdiggins

@ क्रिस: हाँ, मैं cdiggins से सहमत हूँ। जिससे आपको मदद मिलनी चाहिए।

— रॉबिन माबेन

44

मुझे नीचे दिया गया कोड बहुत उपयोगी लगा, यह किसी को भी यहाँ आने में मदद कर सकता है

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>

स्निपेट का विस्तार करें

— AXS
स्रोत

11

Flexbox का उपयोग करना यह सुपर सरल है!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

फिडेल उदाहरण

— प
स्रोत

6

शैली का उपयोग करना

.child_div_1 {
    float:left
}

— amit_g
स्रोत

5

मेरे लिए सबसे अच्छा काम करता है:

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

 .right{
   margin-left:140px;
 }

http://jsfiddle.net/jiantongc/7uVNN/

— jiantongc
स्रोत

2

float:leftबाल दिव्यांग वर्ग में उपयोगकर्ता संपत्ति

div संरचना की विस्तार से जाँच करें: http://www.dzone.com/links/r/div_table.html

— प्रणय राणा
स्रोत

2

फ्लेक्सबॉक्स का उपयोग करना

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }

— dasfdsa
स्रोत