0 सवाल: क्या अलग-अलग ऊंचाई और चौड़ाई के साथ एक ग्रिड के रूप में divs को संरेखित करने का एक तरीका है? [डुप्लिकेट]

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

मुझे एक रन-ऑफ-द-मिल चिनाई लेआउट को लागू करने की आवश्यकता है। हालाँकि, कई कारणों से मैं इसे करने के लिए जावास्क्रिप्ट का उपयोग नहीं करना चाहता।

 अलग-अलग ऊंचाई के आयतों के कई स्तंभों का एक ग्रिड।

पैरामीटर:

  • सभी तत्वों की चौड़ाई समान है
  • तत्वों की एक ऊँचाई होती है जिसकी गणना सर्वर साइड (एक छवि और पाठ की विभिन्न मात्रा)
  • नहीं की जा सकती है
  • यदि मुझे
  • करना है तो मैं निश्चित संख्या में कॉलम के साथ रह सकता हूं

इसका एक तुच्छ समाधान है जो आधुनिक ब्राउज़रों में काम करता है, 06003509911110101035062 संपत्ति।

उस समाधान के साथ समस्या यह है कि तत्वों को कॉलम में आदेश दिया गया है:

 शीर्ष बाईं ओर के बॉक्स से शुरू होकर, वे 4 सीधे नीचे से 1 गिने जाते हैं, अगले कॉलम में सबसे ऊपरी बॉक्स 5 है, और इसी तरह।

जबकि मुझे पंक्तियों में आदेश दिए जाने वाले तत्वों की आवश्यकता है, कम से कम लगभग:

 शीर्ष बाईं ओर के बॉक्स से शुरू होकर, वे 6 सीधे 6 से होकर गुजरते हैं, लेकिन क्योंकि बॉक्स 5 सबसे छोटा बॉक्स है, यह 7 से नीचे है क्योंकि इसमें अगले बॉक्स की तुलना में अधिक पंक्ति पर होने का आभास होता है दूर छोड़ दिया।

दृष्टिकोण मैंने कोशिश की है कि काम न करें:

अब मैं सर्वर साइड रेंडरिंग को बदल सकता हूं और स्तंभों की संख्या से आइटम की संख्या को विभाजित करने वाली वस्तुओं को फिर से व्यवस्थित कर सकता हूं, लेकिन यह जटिल है, त्रुटि-प्रवण (ब्राउज़र कैसे आइटम को विभाजित करने का निर्णय लेते हैं इसके आधार पर कॉलम में सूची), इसलिए यदि संभव हो तो मैं इससे बचना चाहूंगा।

क्या कुछ न्यूफ़ंगल फ्लेक्सबॉक्स जादू है जो इसे संभव बनाता है?

    
78
  1. यह stackoverflow.com/questions/37020224/… , लेकिन इसका कोई हल नहीं है। /div>
    2017-06-05 20: 42: 15Z
  2. किसी ऐसे तरीके के बारे में नहीं सोच सकता जो पूर्वनिर्धारित ऊंचाइयों पर निर्भर न हो। यदि आप JS पर पुनर्विचार करते हैं, तो stackoverflow.com/questions/13518653/… जहाँ मैं ऐसे समाधान को लागू करता हूँ जो काफी सरल है।
    2017-06-05 22: 18: 53Z
  3. @ Gaby अभी आपके समाधान को लागू कर रहा है, धन्यवाद!
    2017-07-19 18: 46: 39Z
  4. मुझे एहसास है कि आपने CSS-only कहा है। मैं केवल यह उल्लेख करना चाहता हूं कि चिनाई को अब jQuery की आवश्यकता नहीं है - न्यूनतम पुस्तकालय 8kb के तहत है - और इसे अकेले HTML के साथ आरंभ किया जा सकता है। बस संदर्भ के लिए jsfiddle.net/wp7kuk1t
    2017-07-23 16: 59: 43Z
  5. यदि आप लाइन-ऊंचाई, फ़ॉन्ट-आकार को जानकर समय से पहले तत्वों की ऊंचाई निर्धारित कर सकते हैं (आपको एक विशिष्ट फ़ॉन्ट की सेवा करनी होगी और करना होगा कुछ चतुर गणना), छवि ऊंचाई, कोने और मार्जिन और पैडिंग, आप ऐसा कर सकते हैं। अन्यथा, आप केवल CSS का उपयोग करके ऐसा नहीं कर सकते। आप प्रत्येक तत्व को पूर्व-रेंडर करने और उस तत्व की ऊँचाई प्राप्त करने के लिए PhantomJS जैसी किसी चीज़ का उपयोग कर सकते हैं, लेकिन इसमें महत्वपूर्ण ओवरहेड /विलंबता जोड़ी जाएगी।
    2017-07-25 07: 28: 06Z
  6. 1 उत्तर                              1                         

    flexbox

    एक गतिशील चिनाई लेआउट flexbox के साथ संभव नहीं है, कम से कम एक साफ और कुशल तरीके से नहीं।

    फ्लेक्सबॉक्स एक आयामी लेआउट प्रणाली है। इसका मतलब यह है कि यह क्षैतिज या ऊर्ध्वाधर रेखाओं के साथ आइटम संरेखित कर सकता है। एक फ्लेक्स आइटम अपनी पंक्ति या कॉलम तक ही सीमित है।

    एक सच्चा ग्रिड सिस्टम द्वि-आयामी है, जिसका अर्थ है कि यह क्षैतिज और ऊर्ध्वाधर रेखाओं के साथ आइटम संरेखित कर सकता है। सामग्री आइटम पंक्तियों और स्तंभों पर एक साथ फैल सकते हैं, जो फ्लेक्स आइटम नहीं कर सकते हैं।

    यही कारण है कि फ्लेक्सबॉक्स में ग्रिड के निर्माण की सीमित क्षमता होती है। यह भी एक कारण है कि W3C ने एक और CSS3 तकनीक विकसित की है, ग्रिड लेआउट //strong>


    float: left

    0600350991100100135062 के साथ एक फ्लेक्स कंटेनर में, फ्लेक्स आइटम को नई पंक्तियों

    से लपेटना होगा।

    इसका मतलब है कि एक फ्लेक्स आइटम उसी पंक्ति में किसी अन्य आइटम के तहत नहीं लिपट सकता है //strong>।

    >> </a> </p>

<p> ऊपर दी गई सूचना <em> div # 3 </em> नीचे दी गई है <em> div # 1 </em>, एक नई पंक्ति बनाता है। यह <em> div # 2 </em> </p> के नीचे नहीं लपेट सकता

<p> परिणामस्वरूप, जब आइटम पंक्ति में सबसे लंबे नहीं होते हैं, तो सफेद स्थान बना रहता है, भद्दा अंतराल बनाता है। </p>

<p> <a href=>> </a> </p>

<Hr>
<H2> <code>row wrap</code> </h2>

<p> यदि आप <code>flex-flow: row wrap</code> पर स्विच करते हैं, तो ग्रिड जैसा लेआउट अधिक प्राप्य है। हालांकि, एक कॉलम-दिशा कंटेनर में बल्ले से चार संभावित समस्याएं हैं: </p>

<Ol>
<li> फ्लेक्स आइटम क्षैतिज रूप से प्रवाहित होते हैं, न कि क्षैतिज रूप से (जैसे आपको इस मामले में ज़रूरत है)। </li>
<li> कंटेनर क्षैतिज रूप से फैलता है, लंबवत नहीं (जैसे Pinterest लेआउट)। </li>
<li> <a href= इसके लिए कंटेनर को एक निश्चित ऊँचाई की आवश्यकता होती है, इसलिए आइटम जहाँ लपेटना जानते हैं।

  7. इस लेखन के रूप में, सभी प्रमुख ब्राउज़रों में इसकी कमी है जहां अतिरिक्त कॉलम समायोजित करने के लिए कंटेनर का विस्तार नहीं होता है
  8. परिणामस्वरूप, एक स्तंभ-दिशा कंटेनर इस मामले में, और कई अन्य मामलों में एक विकल्प नहीं है।


    सीएसएस ग्रिड आइटम आयाम अपरिभाषित के साथ

    ग्रिड लेआउट आपकी समस्या का एक सही समाधान होगा यदि सामग्री आइटम की विभिन्न ऊंचाइयों को पूर्व-निर्धारित किया जा सकता है । अन्य सभी आवश्यकताएँ ग्रिड की क्षमता के भीतर अच्छी तरह से हैं।

    ग्रिड आइटम की चौड़ाई और ऊंचाई आसपास के आइटम के साथ अंतराल को बंद करने के लिए जानी जानी चाहिए।

    तो ग्रिड, जो कि सबसे अच्छी सीएसएस है, को क्षैतिज रूप से बहने वाली चिनाई लेआउट के निर्माण के लिए प्रस्तुत करना पड़ता है, इस मामले में कम हो जाता है।

    वास्तव में, जब तक CSS तकनीक स्वचालित रूप से अंतराल को बंद करने की क्षमता के साथ नहीं आती है, तब तक सामान्य रूप से CSS का कोई समाधान नहीं होता है। कुछ इस तरह से शायद दस्तावेज़ को फिर से भरने की आवश्यकता होगी, इसलिए मुझे यकीन नहीं है कि यह कितना उपयोगी या कुशल होगा।

    आपको एक स्क्रिप्ट की आवश्यकता होगी।

    जावास्क्रिप्ट समाधान निरपेक्ष स्थिति का उपयोग करते हैं, जो बिना किसी अंतराल के उन्हें फिर से व्यवस्थित करने के लिए दस्तावेज़ प्रवाह से सामग्री आइटम निकालता है। यहाँ दो उदाहरण हैं:


    सीएसएस ग्रिड आइटम आयामों के साथ परिभाषित

    लेआउट के लिए, जहां सामग्री आइटम की चौड़ाई और ऊंचाई ज्ञात है, यहां शुद्ध CSS में एक क्षैतिज रूप से बहने वाली चिनाई लेआउट है:

    column wrap

    jsFiddle डेमो


    यह कैसे काम करता है

    1. ब्लॉक-स्तरीय ग्रिड कंटेनर स्थापित करें। (060035099111100100135035062 होगा) अन्य विकल्प)
    2. 0600350991111001010350350 संपत्ति स्वचालित रूप से उत्पन्न पंक्तियों की ऊंचाई निर्धारित करती है। इस ग्रिड में प्रत्येक पंक्ति 50px लंबी है।
    3. 06003509911001001350350 संपत्ति है flex-flow: column wrap और
      grid-container {
        display: grid;                                                /* 1 */
        grid-auto-rows: 50px;                                         /* 2 */
        grid-gap: 10px;                                               /* 3 */
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */
      }
      
      [short] {
        grid-row: span 1;                                             /* 5 */
        background-color: green;
      }
      
      [tall] {
        grid-row: span 2;
        background-color: crimson;
      }
      
      [taller] {
        grid-row: span 3;
        background-color: blue;
      }
      
      [tallest] {
        grid-row: span 4;
        background-color: gray;
      }
      
      grid-item {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3em;
        font-weight: bold;
        color: white;
      }
      <grid-container>
        <grid-item short>01</grid-item>
        <grid-item short>02</grid-item>
        <grid-item tall>03</grid-item>
        <grid-item tall>04</grid-item>
        <grid-item short>05</grid-item>
        <grid-item taller>06</grid-item>
        <grid-item short>07</grid-item>
        <grid-item tallest>08</grid-item>
        <grid-item tall>09</grid-item>
        <grid-item short>10</grid-item>
        <grid-item tallest>etc.</grid-item>
        <grid-item tall></grid-item>
        <grid-item taller></grid-item>
        <grid-item short></grid-item>
        <grid-item short></grid-item>
        <grid-item short></grid-item>
        <grid-item short></grid-item>
        <grid-item tall></grid-item>
        <grid-item short></grid-item>
        <grid-item taller></grid-item>
        <grid-item short></grid-item>
        <grid-item tall></grid-item>
        <grid-item short></grid-item>
        <grid-item tall></grid-item>
        <grid-item short></grid-item>
        <grid-item short></grid-item>
        <grid-item tallest></grid-item>
        <grid-item taller></grid-item>
        <grid-item short></grid-item>
        <grid-item tallest></grid-item>
        <grid-item tall></grid-item>
        <grid-item short></grid-item>
      </grid-container>
      के लिए एक आशुलिपि। यह नियम एक 10px अंतर ग्रिड आइटम के बीच सेट करता है। (यह आइटम और कंटेनर के बीच के क्षेत्र पर लागू नहीं होता है।)
    4. inline-grid //strong> संपत्ति स्पष्ट रूप से परिभाषित कॉलम की चौड़ाई निर्धारित करती है।

      0600350991111001010562 अंकन कॉलम (या पंक्तियों) को दोहराने के एक पैटर्न को परिभाषित करता है।

      0600350991111001010562 फ़ंक्शन ग्रिड को ओवरफ्लो किए बिना यथासंभव कई स्तंभों (या पंक्तियों) को पंक्तिबद्ध करने के लिए कहता है। (यह फ्लेक्स लेआउट के grid-auto-rows पर एक समान व्यवहार बना सकता है।)

      0600350991100101035062 // यूनिट > ग्रिड कंटेनर में मुक्त स्थान के एक अंश का प्रतिनिधित्व करता है। यह flexbox के grid-column-gap संपत्ति के बराबर है।

    5. 0600350991100100135035062 के साथ /a> और 060035099111100100135062 a> हम ग्रिड आइटम बता रहे हैं कि उन्हें कितनी पंक्तियों के पार होना चाहिए।


    CSS ग्रिड के लिए ब्राउज़र समर्थन

    • 8 मार्च, 2017 तक क्रोम - पूर्ण समर्थन (संस्करण 57)
    • फ़ायरफ़ॉक्स - 6 मार्च 2017 तक पूर्ण समर्थन (संस्करण 52)
    • 26 मार्च, 2017 तक पूर्ण समर्थन - (संस्करण 10.1)
    • एज - 16 अक्टूबर 2017 तक पूर्ण समर्थन (संस्करण 16)
    • IE11 - वर्तमान युक्ति के लिए कोई समर्थन नहीं; अप्रचलित संस्करण
    • का समर्थन करता है

    यहां पूरी तस्वीर है: http://caniuse.com/#search=grid


    फ़ायरफ़ॉक्स में

    कूल ग्रिड ओवरले सुविधा

    फ़ायरफ़ॉक्स डेव टूल्स में, जब आप ग्रिड कंटेनर का निरीक्षण करते हैं, तो सीएसएस घोषणा में एक छोटा ग्रिड आइकन होता है। क्लिक करने पर यह पृष्ठ पर आपके ग्रिड की रूपरेखा प्रदर्शित करता है।

    >> </a> </p>

<p> यहां अधिक जानकारी: <a href= https: //developer.mozilla। org /en-US /docs /उपकरण /Page_Inspector /How_to /Examine_grid_layouts

        
    117
    2018-12-19 13: 47: 37Z
    1. शानदार उत्तर! "सीएसएस ग्रिड के साथ आइटम आयामों के साथ परिभाषित" समाधान, क्या सेल की चौड़ाई को सेल चौड़ाई के प्रतिशत के रूप में व्यक्त करना संभव है? यह छवियों को प्रदर्शित करने के लिए उपयोगी होगा, जहां पहलू अनुपात ज्ञात है। हम हर समय पहलू अनुपात बनाए रखना चाहते हैं।
      2018-01-03 16: 27: 45Z
    2. धन्यवाद। छवियों के लिए पहलू अनुपात मुद्दे के संबंध में, "सेल चौड़ाई का प्रतिशत" विधि (प्रतिशत पैडिंग ट्रिक?), यह उस मामले के लिए ग्रिड, या फ्लेक्सबॉक्स में विश्वसनीय नहीं है। यहां और यहाँ । @OliverJosephAsh
      2018-01-03 16: 34: 28Z
    3. हां, मैं प्रतिशत पैडिंग ट्रिक की बात कर रहा हूं। क्या किसी भी कार्य का उपयोग करना संभव हैअपने चिनाई लेआउट समाधान के साथ संयोजन में राउंड? संदर्भ के लिए, हम unsplash.com
      पर छवियों के लिए एक सीएसएस केवल चिनाई लेआउट को लागू करना चाह रहे हैं।
      2018-01-03 16: 50: 45Z
    4. @ ओलिवर जोसेफअश, ग्रिड /फ्लेक्स आइटम के साथ उपयोग किया जाने वाला प्रतिशत पैडिंग ट्रिक फ़ायरफ़ॉक्स (और संभवतः अन्य ब्राउज़र) में विफल हो जाता है। कारणों के लिए मेरी पिछली टिप्पणी में लिंक संदर्भ देखें। मैं कहूंगा कि जेएस वर्तमान में सबसे सुरक्षित मार्ग है।
      2018-01-03 17: 04: 09Z
    5. दुर्भाग्य से इसके लिए JS का उपयोग करना एक विकल्प नहीं है। हम प्रदर्शन और एसईओ कारणों के लिए सर्वर साइड रेंडरिंग को सक्षम करना चाहते हैं। इसका मतलब है कि क्लाइंट-साइड जावास्क्रिप्ट को डाउनलोड करने, पार्स करने और निष्पादित करने से पहले लेआउट को प्रदान किया जाना चाहिए। यह असंभव प्रतीत होता है, मुझे लगता है कि हमें लाइन से कहीं दूर व्यापार करना होगा! आपकी मदद के लिए धन्यवाद: -)
      2018-01-03 17: 19: 06Z
      grid-row-gap
स्रोत रखा गया यहाँ