समान रूप से दूरी वाले DIV के साथ द्रव की चौड़ाई

Question

मेरे पास एक द्रव चौड़ाई वाला कंटेनर DIV है।

इसके भीतर मैं 4 DIVs सभी 300px x 250px ...

<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
   <div class="box4"> </div>
</div>

जो मैं करना चाहता हूं, वह है बॉक्स 1 को बाईं ओर फ्लोट किया जाए, बॉक्स 4 को दाएं और बॉक्स 2 और 3 को समान रूप से फैलाया जाए। मैं चाहता हूं कि रिक्ति तरल हो और साथ ही ब्राउज़र को छोटा किया जाए ताकि अंतरिक्ष भी छोटा हो जाए।

Comments

display:inline-block;फ्लोट के बजाय क्यों नहीं ?

— अय्यप

क्योंकि IE6 / IE7 केवल तत्वों inline-blockपर समर्थन करता inlineहै

— ली प्राइस

ठीक है, निश्चित नहीं था कि आप किस ब्राउज़र के लिए जा रहे हैं।

— अय्यप

निकटतम उपाय जो मैं सोच सकता था कि प्रत्येक बच्चे को एक और div में लपेटना है। 25% चौड़ाई। फिर, बच्चे को .box div को आवरण पर केन्द्रित करें। .Box divs को समान रूप से स्थान दिया जाएगा, लेकिन बाएँ और दाएँ div किनारे पर दाएँ नहीं होंगे।

— पॉल शाम

मैंने @Paul शाम के विचार को JSFiddle में बनाया ।

— स्पार्की

Answer 1

देखें: http://jsfiddle.net/thirtydot/EDp8R/

• यह IE6 + और सभी आधुनिक ब्राउज़रों में काम करता है!
• मैंने आपके अनुरोधित आयामों को आधा कर दिया है, ताकि इसके साथ काम करना आसान हो सके।
• text-align: justify के साथ संयुक्त .stretch स्थिति को संभाल रहा है।
• display:inline-block; *display:inline; zoom:1inline-blockIE6 / 7 के लिए फ़िक्सेस , यहाँ देखें ।
• font-size: 0; line-height: 0 IE6 में एक मामूली समस्या को हल करता है।

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /* just for demo */
  min-width: 612px;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}

<div id="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <span class="stretch"></span>
</div>

अतिरिक्त span( .stretch) के साथ प्रतिस्थापित किया जा सकता है:after ।

यह अभी भी उपरोक्त समाधान के समान सभी ब्राउज़रों में काम करता है। :afterIE6 / 7 में काम नहीं करता है, लेकिन वे उपयोग कर रहे हैंdistribute-all-lines वैसे भी , इसलिए यह कोई फर्क नहीं पड़ता।

देख: http://jsfiddle.net/thirtydot/EDp8R/3/

वहाँ एक मामूली उल्टा है :after : सफारी में अंतिम पंक्ति को पूरी तरह से काम करने के लिए, आपको HTML में व्हाट्सएप से सावधान रहना होगा।

विशेष रूप से, यह काम नहीं करता है:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div>
</div>

और यह करता है:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div></div>

---

आप इसका उपयोग किसी भी बच्चे की मनमानी संख्या के लिए कर सकते हैं, divजिसमें एक-एक boxNवर्ग को बदलकर जोड़ा जा सकता है

.box1, .box2, .box3, .box4 { ...

सेवा

#container > div { ...

यह किसी भी div का चयन करता है जो div का पहला बच्चा है #container, और इसके नीचे कोई अन्य नहीं है। पृष्ठभूमि के रंगों को सामान्य बनाने के लिए, आप CSS3 के nth- ऑर्डर चयनकर्ता का उपयोग कर सकते हैं , हालांकि यह केवल IE9 + और अन्य आधुनिक ब्राउज़रों में समर्थित है:

.box1, .box3 { ...

हो जाता है:

#container > div:nth-child(odd) { ...

Jsfiddle उदाहरण के लिए यहां देखें ।

Comments

मुझे यह पता करने के लिए 3h लिया कि आपको html में प्रत्येक बक्से के बीच रिक्त स्थान होना चाहिए। "औचित्य" तत्वों के बीच रिक्त स्थान का विस्तार करता है और यदि आपकी सामग्री है तो <div/><div/><div/>यह काम नहीं करता है। आपके पास होना चाहिए <div/> <div/> <div/>।

— वेन्यूमस

बस यह नोट करना चाहता था :) क्योंकि अगर आप जनरेट की गई सामग्री (जो कि सामान्य मामला है) के साथ काम करना मुश्किल है। मैं justifyइस तरह के मामले के लिए उपयोग करने के लिए सोच रहा था , लेकिन काम करने वाला समाधान प्रदान करने के लिए धन्यवाद। मुझे बहुत सारे प्रयोगों से बचाया (3 डी डिबगिंग के बावजूद: डी)। इसके अलावा, मैं एक नोट जोड़ सकता हूं कि यदि आप चाहते हैं कि आपकी अंतिम पंक्ति को संरेखित किया जाए तो आपको कुछ अतिरिक्त अदृश्य बक्से (पंक्ति को पूरा करने के लिए) जोड़ना चाहिए

— वेनिमस

@venimus: मैंने इस तकनीक का उपयोग करके एक और उत्तर लिखा है: stackoverflow.com/questions/10548417/… । अदृश्य बक्सों को जोड़ने के कारण होने वाली अतिरिक्त ऊंचाई से छुटकारा पाने के लिए आपने क्या किया?

— ३१

क्या कोई समझा सकता है कि .stretch क्यों जरूरी है?

— एटीपी

@HartleySan: .stretch/ :afterकी आवश्यकता है क्योंकि (आमतौर पर) उचित पाठ के साथ, अंतिम पंक्ति उचित नहीं है । यहां, हम चाहते हैं कि अंतिम पंक्ति उचित हो, इसलिए इसकी आवश्यकता है :after। आपके दूसरे प्रश्न के लिए, मैंने पिछले उत्तर में कुछ समय पहले पता लगाया था । उस उत्तर में, जावास्क्रिप्ट आवश्यक था। यदि आपको पुराने ब्राउज़र (IE8) का समर्थन करने की आवश्यकता है तो मेरा मानना ​​है कि आपको जावास्क्रिप्ट की आवश्यकता है।

— १

Answer 2

अब ऐसा करने का सबसे आसान तरीका फ्लेक्सबॉक्स है:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

सीएसएस तो बस है:

#container {
    display: flex;
    justify-content: space-between;
}

डेमो: http://jsfiddle.net/QPrk3/

हालाँकि , यह वर्तमान में केवल अपेक्षाकृत हाल के ब्राउज़रों ( http://caniuse.com/flexbox ) द्वारा समर्थित है । इसके अलावा, फ्लेक्सबॉक्स लेआउट के लिए कल्पना कुछ बार बदल गई है, इसलिए पुराने सिंटैक्स सहित अतिरिक्त ब्राउज़रों को कवर करना संभव है:

http://css-tricks.com/old-flexbox-and-new-flexbox/

http://css-tricks.com/using-flexbox/

Comments

इसके लिए धन्यवाद, इतना आसान है, मैंने इसे एक पृष्ठ के निचले भाग में तय किए गए पाद लेख में चार स्थानिक सूचियों पर लागू किया। FF28.0, Chrome 34.0.1847.116 m और IE11 में एक उपचार का काम किया।

— user1063287

फ्लेक्सबॉक्स पूरे वेब पर सबसे अधिक समर्थित उपकरण नहीं है और यह मार्जिन और पैडिंग के क्लासिक दृष्टिकोण को नहीं हराता है।

— TheBlackBenzKid

परिभाषित विधा के साथ कई विभाजनों के औचित्य की तलाश में हर कोई: प्रदर्शन के साथ फ्लेक्स-रैप का उपयोग करें: फ्लेक्स विकल्प। यह डायवर्स को डायनेमिक चौड़ाई के साथ लपेटेगा।

— कामिल बुडज़्वस्की

Answer 3

यदि css3 एक विकल्प है, तो यह css calc()फ़ंक्शन का उपयोग करके किया जा सकता है ।

केस 1: एकल लाइन ( FIDDLE) पर बॉक्स को सही ठहराना )

मार्कअप सरल है - कुछ कंटेनर तत्व के साथ divs का एक गुच्छा।

सीएसएस इस तरह दिखता है:

div
{
    height: 100px;
    float: left;
    background:pink;
    width: 50px;
    margin-right: calc((100% - 300px) / 5 - 1px); 
}
div:last-child
{
    margin-right:0;
}

जहाँ IE9 + कैल्क / गोलाई बग को ठीक करने के लिए -1px - यहाँ देखें

केस 2: कई लाइनों पर बॉक्स को सही ठहराना ( FIDDLE )

यहां, calc()फ़ंक्शन के अतिरिक्त , media queriesआवश्यक हैं।

मूल विचार प्रत्येक #columns राज्यों के लिए एक मीडिया क्वेरी सेट करना है, जहाँ मैं तब तत्वों में से प्रत्येक (अंतिम कॉलम में लोगों को छोड़कर) पर मार्जिन-राइट का काम करने के लिए calc () का उपयोग करता हूं।

यह बहुत काम की तरह लगता है, लेकिन यदि आप LESS या SASS का उपयोग कर रहे हैं तो यह काफी आसानी से किया जा सकता है

(यह अभी भी नियमित सीएसएस के साथ किया जा सकता है, लेकिन फिर आपको सभी गणना मैन्युअल रूप से करनी होगी, और फिर यदि आप अपने बॉक्स की चौड़ाई बदलते हैं - तो आपको फिर से सब कुछ काम करना होगा)

नीचे LESS का उपयोग करके एक उदाहरण दिया गया है: (आप इसके साथ खेलने के लिए इस कोड को यहाँ कॉपी / पेस्ट कर सकते हैं , [यह भी कोड है जिसका उपयोग मैंने उपर्युक्त फिडेल को उत्पन्न करने के लिए किया था])

@min-margin: 15px;
@div-width: 150px;

@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);

@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);


*{margin:0;padding:0;}

.container
{
    overflow: auto;
    display: block;
    min-width: @3divs-width;
}
.container > div
{
    margin-bottom: 20px;
    width: @div-width;
    height: 100px;
    background: blue;
    float:left;
    color: #fff;
    text-align: center;
}

@media (max-width: @3divs-width) {
    .container > div {  
        margin-right: @min-margin;
    }
    .container > div:nth-child(3n) {  
        margin-right: 0;
    }
}

@media (min-width: @3divs-width) and (max-width: @4divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
    }
    .container > div:nth-child(3n) {  
        margin-right: 0;
    }
}

@media (min-width: @4divs-width) and (max-width: @5divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
    }
    .container > div:nth-child(4n) {  
        margin-right: 0;
    }
}

@media (min-width: @5divs-width) and (max-width: @6divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
    }
    .container > div:nth-child(5n) {  
        margin-right: 0;
    }
}

@media (min-width: @6divs-width){
    .container > div {  
        margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
    }
    .container > div:nth-child(6n) {  
        margin-right: 0;
    }
}

तो मूल रूप से आपको पहले बॉक्स-चौड़ाई और एक न्यूनतम मार्जिन तय करना होगा जो आप बक्से के बीच चाहते हैं।

इसके साथ, आप यह पता लगा सकते हैं कि आपको प्रत्येक राज्य के लिए कितनी जगह चाहिए।

फिर, अंतिम कॉलम में बक्से से सही मार्जिन को हटाने के लिए सही मार्जिन और एनटीएच-बच्चे को शांत करने के लिए कैल्क () का उपयोग करें।

स्वीकृत उत्तर पर इस उत्तर का लाभ जो उपयोग करता text-align:justifyहै वह यह है कि जब आपके पास एक से अधिक बॉक्स हैं - अंतिम पंक्ति के बक्से को 'उचित' नहीं मिलता है जैसे: यदि अंतिम पंक्ति पर 2 बॉक्स शेष हैं - मैं नहीं चाहते हैं कि पहला बॉक्स बाईं ओर हो और अगला एक दाईं ओर हो - लेकिन इसके बजाय कि बॉक्स क्रम में एक दूसरे का अनुसरण करते हैं।

ब्राउज़र समर्थन के बारे में : यह IE9 +, फ़ायरफ़ॉक्स, क्रोम, Safari6.0 + पर काम करेगा (- अधिक विवरण के लिए यहां देखें) हालांकि मैंने देखा कि IE9 + पर मीडिया क्वेरी राज्यों के बीच थोड़ी गड़बड़ है। [अगर कोई जानता है कि इसे कैसे ठीक करना है तो मैं वास्तव में जानना चाहूंगा :)] <- FIXED HERE

Answer 4

अन्य पोस्ट में फ्लेक्सबॉक्स का उल्लेख किया गया है , लेकिन यदि आइटम की एक से अधिक पंक्ति आवश्यक है , तो फ्लेक्सबॉक्स की space-betweenसंपत्ति विफल हो जाती है (पोस्ट का अंत देखें)

आज तक, इसके लिए एकमात्र स्वच्छ समाधान है

सीएसएस ग्रिड लेआउट मॉड्यूल ( कोडपेन डेमो )

मूल रूप से प्रासंगिक कोड इसके लिए आवश्यक है:

ul {
  display: grid; /* (1) */
  grid-template-columns: repeat(auto-fit, 120px); /* (2) */
  grid-gap: 1rem; /* (3) */
  justify-content: space-between; /* (4) */
  align-content: flex-start; /* (5) */
}

1) कंटेनर तत्व को ग्रिड कंटेनर बनाएं

2) 'ऑटो' कॉलम के साथ ग्रिड को सेट करें - आवश्यकतानुसार। यह उत्तरदायी लेआउट के लिए किया जाता है। प्रत्येक कॉलम की चौड़ाई 120px होगी। (नोट auto-fit(के रूप में अपील auto-fill) के उपयोग पर ध्यान दें, जो (एक पंक्ति पंक्ति लेआउट के लिए) 0 के लिए खाली पटरियों को ध्वस्त कर देता है - आइटम को शेष स्थान लेने के लिए विस्तार करने की अनुमति देता है। ( इस डेमो को देखें कि मैं किस बारे में बात कर रहा हूं। ))।

3) ग्रिड पंक्तियों और स्तंभों के लिए अंतराल / गटर सेट करें - यहाँ, क्योंकि 'स्पेस-बीच' लेआउट चाहते हैं - यह अंतराल वास्तव में एक न्यूनतम अंतर होगा क्योंकि यह आवश्यक रूप से बढ़ेगा।

4) और 5) - फ्लेक्सबॉक्स के समान।

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  grid-gap: 1rem;
  justify-content: space-between;
  align-content: flex-start;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
}
li {
  background: tomato;
  height: 120px;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

कोडपेन डेमो (प्रभाव को देखने के लिए आकार बदलें)

---

ब्राउज़र का समर्थन - Caniuse

वर्तमान में क्रोम (ब्लिंक), फ़ायरफ़ॉक्स, सफारी और एज द्वारा समर्थित है! ... IE से आंशिक समर्थन के साथ (देखें राहेल एंड्रयू द्वारा यह पोस्ट )

---

ध्यान दें:

फ्लेक्सबॉक्स की space-betweenसंपत्ति वस्तुओं की एक पंक्ति के लिए बहुत अच्छा काम करती है, लेकिन जब एक फ्लेक्स कंटेनर में लगाया जाता है जो आइटम को लपेटता है - (के साथ flex-wrap: wrap) - विफल रहता है, क्योंकि आपके पास आइटम की अंतिम पंक्ति के संरेखण पर कोई नियंत्रण नहीं है; अंतिम पंक्ति हमेशा उचित होगी (आमतौर पर वह नहीं जो आप चाहते हैं)

प्रदर्शित करना:

body {
  margin: 0;
}
ul {
  
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
  
}
li {
  background: tomato;
  width: 110px;
  height: 80px;
  margin-bottom: 1rem;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

कोडपेन (यह देखने के लिए कि मैं किस बारे में बात कर रहा हूं)

---

सीएसएस ग्रिड पर आगे पढ़ने:

• MDN
• जेन सीमन्स - सीएसएस ग्रिड सीखें
• CSS ग्रिड के लिए एक पूर्ण गाइड | सीड्रॉप CSS संदर्भ
• ग्रिड के लिए एक पूर्ण गाइड - सीएसएस ट्रिक्स

Comments

बहुत ही कम जवाब। मैं जो करना चाहता था, उसे हासिल करने का यह सबसे सरल और प्रभावी तरीका था। धन्यवाद।

— मर्सर

यह सीएसएस (और कोई जेएस!) की सबसे छोटी राशि थी जो बिल्कुल वही व्यवहार पैदा करता था जिसकी मुझे तलाश थी, आकार और स्थान के लिए कुछ ट्विकिंग के साथ।

— EKW

मैं थोड़ी देर के लिए इस के लिए देख रहा हूँ और अंत में यह पाया गया! साभार @ डेडिल्ड

— nareeboy

Answer 5

यह मेरे लिए अलग-अलग आकारों में 5 छवियों के साथ काम करता है।

1. एक कंटेनर div बनाएँ
2. छवियों के लिए एक अनियंत्रित सूची
3. सीएसएस पर असमान को लंबवत और गोलियों के बिना प्रदर्शित किया जाना चाहिए
4. कंटेनर डिव की सामग्री को औचित्य दें

यह औचित्य-सामग्री के कारण काम करता है: अंतरिक्ष-के बीच, और यह एक सूची में है, क्षैतिज रूप से प्रदर्शित होता है।

सीएसएस पर

 #container {
            display: flex;
            justify-content: space-between;
 }
    #container ul li{ display:inline; list-style-type:none;
}

Html पर

<div id="container"> 
  <ul>  
        <li><img src="box1.png"><li>
        <li><img src="box2.png"><li>
        <li><img src="box3.png"><li>
        <li><img src="box4.png"><li>
        <li><img src="box5.png"><li>
    </ul>
</div>

Comments

हालांकि यह कोड अच्छी तरह से काम कर सकता है, एक अच्छे उत्तर में यह व्याख्या शामिल होगी कि यह कैसे काम करता है और यह एक अच्छा समाधान क्यों है।

— ब्लैकवुड

यह ध्यान देने योग्य है कि फ्लेक्सबॉक्स IE ( caniuse.com/#feat=flexbox

— डेविड

क्या यह उत्तरदायी है?

— स्टैकडेव

Answer 6

में jQueryआप सीधे जनक लक्षित कर सकते हैं।

यह उपयोगी है कि अगर आप नहीं जानते हैं कि कितने बच्चे हैं, तो उन्हें डायनामिक से जोड़ा जा सकता है या यदि आप उनकी संख्या के बारे में पता नहीं लगा सकते हैं।

var tWidth=0;

$('.children').each(function(i,e){
tWidth += $(e).width();

///Example: If the Children have a padding-left of 10px;..
//You could do instead:
tWidth += ($(e).width()+10);

})
$('#parent').css('width',tWidth);

यह बेंग जोड़ रहे हैं के parentरूप में क्षैतिज बढ़ने देंगे children।

नोट: यह मानता है कि '.children'एक widthऔर Heightसेट है

उम्मीद है की वो मदद करदे।

Answer 7

यदि आप प्रति "पंक्ति" तत्वों की संख्या और कंटेनर की चौड़ाई जानते हैं, तो आप उन तत्वों को एक मार्जिन जोड़ने के लिए एक चयनकर्ता का उपयोग कर सकते हैं जिन्हें आपको एक उचित रूप देने की आवश्यकता है।

मेरे पास तीन डिवीजनों की पंक्तियाँ थीं जिन्हें मैं उचित समझता था इसलिए:

.tile:nth-child(3n+2) { margin: 0 10px }

यह केंद्र पंक्ति को प्रत्येक पंक्ति में एक मार्जिन रखने की अनुमति देता है जो कंटेनर के बाहरी किनारों पर 1 और 3 डी div को मजबूर करता है

अन्य चीज़ों जैसे कि बॉर्डर बैकग्राउंड कलर्स आदि के लिए भी बढ़िया है