उदाहरण कोड: https://jsfiddle.net/z7ybks9u/2/

प्रेरणा: मैं 3 कॉलम लेआउट को बाध्य करना चाहता हूं, निश्चित चौड़ाई के लिए समर्थन के साथ लेकिन परिवर्तनीय ऊंचाई DIVS, बुद्धि लेआउट दक्षता जो आइटम के बीच बड़े "व्हाइटस्पेस छेद" को उजागर नहीं करेगा . चूंकि तत्वों की संख्या अज्ञात है, मैं फ्लेक्स कंटेनर की ऊंचाई को सीमित नहीं कर सकता

समस्या: फ्लेक्स कंटेनर की ऊंचाई को मजबूर किए बिना, मैं एक से अधिक कॉलम नहीं देख सकता, क्योंकि यह केवल एक कॉलम में सभी आइटम फिट करने के लिए आवश्यक लंबवत स्थान का उपयोग करता है।

मुझे क्या करने के लिए मजबूर किया जाता है:

gallery-height {

      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: center;
      max-height: 700px;   <-----  NEED TO DO THAT TO SEE COLUMNS BUT I HAVE TO SUPPORT UNKNOWN NBR OF ELEMENTS
    }
3
JasonGenX 27 फरवरी 2019, 00:16

1 उत्तर

सबसे बढ़िया उत्तर

फ्लेक्स कंटेनर को column-count के पक्ष में छोड़ने से मदद मिल सकती है: https://jsfiddle.net/69nmwqag/ ए>

.gallery-height {
  column-count: 3;
}

फिर मैंने width: 30%; को .img पर गिरा दिया।

4
Mike 26 फरवरी 2019, 21:36