सीएसएस कॉलम/फ्लेक्सबॉक्स आइटम के बीच कोई अंतर नहीं

Question

मुझे अपने कॉलम लेआउट में तत्वों के बीच अंतराल से छुटकारा पाने की आवश्यकता है। मैं नवीनतम सीएसएस 3 का उपयोग कर सकता हूं क्योंकि साइट को आधुनिक ब्राउज़र/उपकरणों पर लक्षित किया गया है, लेकिन मुझे जावास्क्रिप्ट समाधान से बचने की आवश्यकता है जैसे कि सर्वर से वितरित पृष्ठ को क्लाइंट की चौड़ाई के आधार पर फिर से प्रस्तुत करने की आवश्यकता नहीं है।

फ्लेक्सबॉक्स, सीएसएस कॉलम और अन्य चालों का उपयोग करके मुझे एक चिड़चिड़ाहट लेआउट को संयोजित करने की आवश्यकता है। (Pinterest जावास्क्रिप्ट और उनके लेआउट के लिए पूर्ण स्थिति का उपयोग करता है, यह जेएस बंद होने के साथ भी प्रस्तुत नहीं करता है।) साइट में ज्ञात चौड़ाई लेकिन परिवर्तनीय ऊंचाई वाले बक्से हैं। ब्राउज़र चौड़ाई के आधार पर कॉलम की संख्या अलग-अलग होनी चाहिए। (मैं मीडिया के प्रश्नों के माध्यम से ऐसा कर सकते हैं, तो मुझे पता है कि सीएसएस विशेषता को बदलने के लिए।) यहाँ यह है कि क्या लग रहा है की तरह है: via

भी ध्यान रखें कि मैं सिर्फ कंटेनर की ऊंचाई बढ़ाने नहीं कर सकता को भरने के लिए खाली जगह मैं यूपी के नीचे की वस्तु को लाना चाहता हूं, सभी ऊंचाइयों को मैच नहीं बनाऊंगा। (तो ऊपर चित्र में 1 आइटम, 3, और 4 खींच जो मैं चाहता नहीं है।)

बातें मैं कोशिश की है:

• सीएसएस 3 कॉलम। यह बहुत अच्छा लग रहा है, लेकिन आइटम गलत क्रम में हैं, दूसरी वस्तु पहले के तहत है। अगर इसे एक अलग क्रम में बदला जा सकता है जैसे कि वे बाएं से दाएं, महान हो जाते हैं!

• फ्लेक्सबॉक्स विभिन्न फ्लेक्सबॉक्स कॉन्फ़िगरेशन, मैंने बस हर सेटिंग की कोशिश की है जिसे मैं बदलने में सक्षम था।

• जावास्क्रिप्ट। हां, मुझे पता है कि मैं मैन्युअल रूप से कॉलम बना सकता हूं और उन्हें आकार बदलने पर पुनः प्रस्तुत कर सकता हूं। मैं एक महंगी पुन: प्रस्तुत करने वाले ऑपरेशन से बचने के लिए देख रहा हूं जिसके लिए कॉलम और डिस्प्ले के मैन्युअल संतुलन की आवश्यकता होती है। मैं पुराने ब्राउज़र के लिए इसका सहारा ले सकता हूं जो सीएसएस 3 समाधान का समर्थन नहीं करता है। मैं मैन्युअल रूप से सभी वस्तुओं को पोजिशन करने से बचाना चाहता हूं। कुल।

मैंने जेएसफ़िडल को एक टिप्पणी लिंक डाला है क्योंकि मैं इसे यहां "कोड के लिए लिंक की आवश्यकता नहीं है" के रूप में नहीं डाल सकता।

Answer 1

http://desandro.github.io/masonry/ का उपयोग करें चिनाई आपकी समस्या को हल करने में मदद करेगी, यह Pinterest का उपयोग करता है। मेरी कंपनी वर्तमान में एक प्रोग्राम विकसित करने के लिए इसका उपयोग कर रही है, यह बहुत आसान और उपयोगकर्ता के अनुकूल है।

Answer 2

इस डेमो को चेक करें। यह शुद्ध सीएसएस 3 चिनाई प्रभाव है। लिंक

ऊपर

body { 
 
    font: 1em/1.67 'Open Sans', Arial, Sans-serif; 
 
    margin: 0; 
 
    background: #e9e9e9; 
 
} 
 

 
.wrapper { 
 
    width: 95%; 
 
    margin: 3em auto; 
 
} 
 

 
.masonry { 
 
    margin: 1.5em 0; 
 
    padding: 0; 
 
    -moz-column-gap: 1.5em; 
 
    -webkit-column-gap: 1.5em; 
 
    column-gap: 1.5em; 
 
    font-size: .85em; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    background: #fff; 
 
    padding: 1em; 
 
    margin: 0 0 1.5em; 
 
    width: 100%; 
 
    height: 150px; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-shadow: 2px 2px 4px 0 #ccc; 
 
} 
 
.item.black{ 
 
background-color: #000; height:200px;} 
 
.item.blue{ 
 
background-color:blue; height:250px;} 
 
.item.green{ 
 
background-color:green; height:300px;} 
 

 
@media only screen and (min-width: 400px) { 
 
    .masonry { 
 
     -moz-column-count: 2; 
 
     -webkit-column-count: 2; 
 
     column-count: 2; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 700px) { 
 
    .masonry { 
 
     -moz-column-count: 3; 
 
     -webkit-column-count: 3; 
 
     column-count: 3; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 900px) { 
 
    .masonry { 
 
     -moz-column-count: 4; 
 
     -webkit-column-count: 4; 
 
     column-count: 4; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1100px) { 
 
    .masonry { 
 
     -moz-column-count: 5; 
 
     -webkit-column-count: 5; 
 
     column-count: 5; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1280px) { 
 
    .wrapper { 
 
     width: 1260px; 
 
    } 
 
}

<div class="masonry"> 
 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
    <div class="item black">...</div> 
 
    <div class="item blue">...</div> 
 
    <div class="item green">...</div> 
 
    <div class="item black">...</div> 
 
    <div class="item blue">...</div> 
 
    <div class="item green">...</div> 
 
    <div class="item black">...</div> 
 
    <div class="item blue">...</div> 
 
    <div class="item green">...</div> 
 
</div>

आशा इस से http://w3bits.com/labs/css-masonry/

एक प्रकार का बीज आप के लिए उपयोगी है।

Answer 3

आप flexbox से इसे प्राप्त कर सकते हैं:

HTML:

<div class="container"> 
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
    <div class="item">4</div> 
    <div class="item">5</div> 
    <div class="item">6</div> 
</div> 

सीएसएस:

.container { 
    max-width: 900px; 
    height: 470px; 
    display: flex; 
    flex-flow: column wrap; 
    align-items: flex-start; 
} 

.item { 
    height: 150px; 
} 

http://codepen.io/asim-coder/pen/vXzKgg

Answer 4

CSS3: मुख्य उल ली है कि सभी 8 बूंद रखती सेट मार्जिन के लिए पैनलों को डाउन करें: 0 ऑटो;

mainList li { 
    margin: 0 auto; /*0 giving no margins on the top and bottom of the panels, and auto making the panels use all of the space within the parent, mainList. I hope this helps.*/ 
} 

Answer 5

ठीक है, थोड़ा देर हो चुकी है, यह एक समाधान हो सकता है।

मैं फ्लेक्स का उपयोग कर रहा हूं क्योंकि यह एकमात्र सिस्टम है जो आप चाहते हैं कि ऑर्डर बदल सकता है।

इस विधि का drawbakcs कि मैं विभाजक के रूप में कार्य करने के लिए कुछ कृत्रिम तत्वों का उपयोग करने की आवश्यकता है, और मैं कंटेनर

.container { 
 
    border: 1px solid black; 
 
    width: 90%; 
 
    height: 700px; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    align-items: flex-start; 
 
} 
 
.item { 
 
    height: 150px; 
 
    width: 24%; 
 
    margin: 2px; 
 
} 
 
.item:nth-child(3n + 1) { 
 
    height: 200px; 
 
} 
 
.item:nth-child(3n + 2) { 
 
    height: 250px; 
 
} 
 
.item:nth-child(4n) { 
 
    background-color: orange; 
 
    order: 40; 
 
} 
 
.item:nth-child(4n + 1) { 
 
    background-color: green; 
 
    order: 10; 
 
} 
 
.item:nth-child(4n + 2) { 
 
    background-color: lightblue; 
 
    order: 20; 
 
} 
 
.item:nth-child(4n + 3) { 
 
    background-color: yellow; 
 
    order: 30; 
 
} 
 
.divider { 
 
    width: 1px; 
 
    background-color: red; 
 
    height: 100%; 
 
} 
 
.divider:nth-last-child(3) { 
 
    order: 15; 
 
} 
 
.divider:nth-last-child(2) { 
 
    order: 25; 
 
} 
 
.divider:nth-last-child(1) { 
 
    order: 35; 
 
}

<div class="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 
    <div class="divider"></div> 
 
    <div class="divider"></div> 
 
    <div class="divider"></div> 
 
</div>