CSS का उपयोग करके 3 divs को एक साथ कैसे फ्लोट करें?

Question

मैं जानता हूं कि 2 डिव साइड फ्लोट को साइड से कैसे बनाया जाता है, बस एक को लेफ्ट और दूसरे को राइट से फ्लोट किया जाता है।

लेकिन यह 3 डिव के साथ कैसे करें या क्या मुझे सिर्फ इस उद्देश्य के लिए तालिकाओं का उपयोग करना चाहिए?

Comments

ज्यादा जानकारी नहीं है। परतें कितनी चौड़ी हैं?

— जोश स्टोडोला

मैं display: inline-blockउन लोगों के बजाय उन्हें नाव चाहिए। यदि उनकी चौड़ाई कंटेनर की चौड़ाई से कम है, तो वे एक दूसरे के बगल में बैठेंगे।

— एडम वेट

मैं "डिस्प्ले: टेबल" का उपयोग करने की सलाह देता हूं। यह सबसे अधिक रखरखाव योग्य और विश्वसनीय समाधान है। देखें stackoverflow.com/questions/14070787/…

— जॉन हेंकेल

Answer 1

बस उन्हें एक चौड़ाई दें और float: left;, यहाँ एक उदाहरण है:

<div style="width: 500px;">
 <div style="float: left; width: 200px;">Left Stuff</div>
 <div style="float: left; width: 100px;">Middle Stuff</div>
 <div style="float: left; width: 200px;">Right Stuff</div>
 <br style="clear: left;" />
</div>

Comments

क्या होगा यदि आप चाहते हैं कि पेज का विस्तार होते ही उन सभी का विस्तार हो?

— कोडीबगस्टीन

@ केवल px के बजाय% का उपयोग करें

— TehTris

आप <br style="clear: left;" />विशेष रूप से उस शैली के साथ उपयोग करने के बारे में विस्तार से बता सकते हैं ।

— माइक डी किलक

@MikedeKlerk माता-पिता के पतन से बचने के लिए, यह एक उपसर्ग है।

— एंजेल पोलिटिस

जैसा कि @Nick क्रेवर ने समझाया, आपको अपने सभी तत्वों को फ्लोट: बाईं संपत्ति देना चाहिए । यह इसलिए हो रहा है क्योंकि फ्लोट संपत्ति निर्दिष्ट करती है कि तत्व को उसके मूल कंटेनर के बाईं या दाईं ओर कैसे रखा गया है ।

— नशा जोरिक

Answer 2

आधुनिक तरीका सीएसएस फ्लेक्सबॉक्स का उपयोग करना है , समर्थन तालिकाओं को देखें ।

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

आप सीएसएस ग्रिड का उपयोग भी कर सकते हैं , समर्थन तालिकाओं को देख सकते हैं ।

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

Answer 3

यह उसी तरह है जैसे आप दो डिवीजनों के लिए करते हैं, बस तीसरे को फ्लोट करें बाएं या दाएं भी।

<style>
  .left{float:left; width:33%;}
</style>

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

Comments

लेकिन DIV एक ब्लॉक स्तर का तत्व है, है ना? फिर कैसे उन्हें साइड में रखा जाता है और अगली लाइनों में नहीं (जैसे ब्लॉक स्तर के तत्व एक लाइन ब्रेक के साथ शुरू और समाप्त होते हैं)। क्या फ्लोट का इस पर कुछ अन्य प्रभाव भी है?

— अश्विन

Answer 4

उन सभी को छोड़ दें

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

Answer 5

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

कोड है कि किसी को वहाँ तैनात, यह चाल किया !!! जब मैं कंटेनर DIV को बंद करने से ठीक पहले पेस्ट करता हूं, तो यह बाद के सभी DIV को ओवरव्यू से ओवरलेप करने में मदद करता है, जो मैंने ऊपर की तरफ साइड-बाय-साइड बनाए हैं!

<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!--  then magic trick comes here  -->
<br style="clear: left;" />
</div>

Tadaa !! :)

Answer 6

बाईं ओर सभी तीन divat तैरने। जैसे यहाँ:

.first-div {
  width:370px;
  height:150px;
  float:left;
  background-color:pink;
}

.second-div {
  width:370px;
  height:150px;
  float:left;
  background-color:blue;
}

.third-div {
  width:370px;
  height:150px;
  float:left;
  background-color:purple;
}

Comments

मुद्दा यह है कि मेरा उत्तर सबसे सही है और जब कोई नया व्यक्ति इंटरनेट पर इस क्यू को खोज रहा होगा तो वे मेरे उत्तर में आएंगे जो उनके लिए सबसे अधिक उपयोगी होगा।

— अरवेन

ऐसा हो सकता है। लेकिन इसमें किसी भी स्पष्टीकरण का अभाव है। इस साइट पर अन्य उत्तरों को कॉपी करना ठीक है, कई आंशिक उत्तरों को एक संयुक्त बेहतर उत्तर में विलय करना। आप संपादित कर सकते हैं और अपना पूरा कर सकते हैं। हालाँकि नए उपयोगकर्ताओं के लिए कुछ प्रतिबंध (upvoting, कुछ लिंक) हैं, इसलिए मैं अभी भी पुराने और उत्तर दिए गए प्रश्नों पर ध्यान केंद्रित नहीं करने की सलाह दूंगा।

— cfi

@ cfi धन्यवाद, मैं इसे भविष्य में संदर्भ के लिए रखूंगा।

— अरविन

Answer 7

मैं आमतौर पर सिर्फ पहली बाईं ओर, दूसरी दाईं ओर तैरती हूं। तीसरा स्वचालित रूप से उनके बीच संरेखित करता है।

<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>

Comments

क्या ब्राउज़र के आकार बदलने पर गड़बड़ नहीं होती?

— कोडिएगस्टीन

Answer 8

<style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>

<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>

इस तरह से लाभ यह है कि आप प्रत्येक कॉलम की चौड़ाई को दूसरे से स्वतंत्र रख सकते हैं जब तक आप इसे 100% से कम रखते हैं, यदि आप 3 x 30% का उपयोग करते हैं, तो शेष 10% को 5% डिवाइडर के रूप में विभाजन के बीच विभाजित किया जाता है।

Answer 9

आप तैर सकते हैं: उन सभी के लिए छोड़ दिया और चौड़ाई 33.333% पर सेट करें

Answer 10

शैली में "प्रदर्शन: ब्लॉक" जोड़ने का प्रयास करें

<style>
   .left{
          display: block;
          float:left; 
          width:33%;
    }
</style>


<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

Answer 11

मैंने बूटस्ट्रैप का उत्तर नहीं देखा, इसलिए इसकी कीमत क्या है:

<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />

बूटस्ट्रैप को प्रतिशत बताएं। मैं दोनों को स्पष्ट करना पसंद करता हूं, बस मामले में।

Comments

बूटस्ट्रैप 4 में, मुझे लगता है कि आपको पूरी कक्षा को पंक्ति वर्ग के साथ लपेटना होगा।

— जॉन ग्रैबॉसकास

Answer 12

मुझे यह तरीका पसंद है, IE के पुराने संस्करणों में फ्लोट्स को खराब समर्थन दिया जाता है (वास्तव में? ...)

.column-left{ position:absolute; left: 0px; width: 33.3%; background: red; }
.column-right{position:absolute; left:66.6%; width: 33.3%; background: green; }
.column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; }

अद्यतन: बेशक, इस तकनीक का उपयोग करने के लिए और पूर्ण स्थिति के कारण आपको कंटेनर पर डिवल्स को घेरने की ज़रूरत है और यदि कुछ इस तरह की ऊंचाई को परिभाषित करने के लिए पोस्टप्रोसेसिंग करना है:

jQuery(document).ready(function(){ 
    jQuery('.main').height( Math.max (
        jQuery('.column-left').height(),
        jQuery('.column‌​-right').height(),
        jQuery('.column-center').height())
    ); 
});

दुनिया में सबसे आश्चर्यजनक बात नहीं है, लेकिन कम से कम पुराने IE पर नहीं टूटता है।

Comments

बेशक, इस तकनीक का उपयोग करने के लिए और पूर्ण स्थिति के कारण आपको एक कंटेनर पर divs को

— घेरना होगा

jQuery (दस्तावेज़)। पहले से ही (फ़ंक्शन () {jQuery ('मुख्य'))। ऊँचाई (Math.max (JQuery ('। स्तंभ-बाएँ'))। ऊँचाई (), jQuery ('। स्तंभ-दाएँ') ऊँचाई। (), jQuery ('कॉलम-सेंटर'))। ऊँचाई ());}); दुनिया में सबसे आश्चर्यजनक बात नहीं है, लेकिन कम से कम पुराने IE पर नहीं टूटता है।

— jpbourbon

Answer 13

लेकिन क्या यह क्रोम में काम करता है?

प्रत्येक div फ्लोट करें और स्पष्ट सेट करें; दोनों पंक्ति के लिए। यदि आप नहीं करना चाहते हैं तो चौड़ाई निर्धारित करने की आवश्यकता नहीं है। Chrome 41, Firefox 37, IE 11 में काम करता है

JS Fiddle के लिए क्लिक करें

एचटीएमएल

<div class="stack">
    <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
    </div>
        <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
                    <div class="col">
            Three
        </div>
    </div>
</div>

सीएसएस

.stack .row { 
clear:both;

}
.stack .row  .col    {
    float:left;
      border:1px solid;

}

Answer 14

यहां बताया गया है कि मैं एक <footer>तत्व के अंदर ऐसा कुछ करने में कामयाब रहा :

<div class="content-wrapper">

    <div style="float:left">
        <p>&copy; 2012 - @DateTime.Now.Year @Localization.ClientName</p>
    </div>

    <div style="float:right">
        <p>@Localization.DevelopedBy <a href="http://leniel.net" target="_blank">Leniel Macaferi</a></p>
    </div>

    <div style="text-align:center;">
        <p>☎ (24) 3347-3110 | (24) 8119-1085&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
    </div>

</div>

सीएसएस:

.content-wrapper
{
    margin: 0 auto;
    max-width: 1216px;
}

Answer 15

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

.content-wrapper > div { width:33.3%; }

आप जोड़ने के बजाय प्रत्येक div को वर्ग नाम दे सकते हैं inline style, जो एक अच्छा अभ्यास नहीं है।

इन div के नीचे बनी हुई सामग्री से बचने के लिए एक स्पष्ट उपखंड या स्पष्ट div का उपयोग करना सुनिश्चित करें।

आप यहां क्लियरफिक्स डिव का उपयोग करने के तरीके के विवरण पा सकते हैं