उत्तरदायी ग्रिड ढांचे - फ्लोट: बनाम डिस्प्ले: टेबल-सेल

Question

मैंने बूटस्ट्रैप का उपयोग किया है, और फाउंडेशन शोध किया है। मैंने जो देखा है, उनमें से दोनों उत्तरदायी ग्रिड प्राप्त करने के लिए float: का उपयोग करते हैं।

मैंने केवल display: table-cell और @media क्वेरी का उपयोग करके उत्तरदायी ग्रिड भी देखा है।

बाद वाला मुझे बेहतर लगता है क्योंकि float: एक विशेष टाइपोग्राफ़िकल प्रभाव प्राप्त करने का इरादा है, इसलिए उत्तरदायी ग्रिड लेआउट प्राप्त करने के लिए इसका उपयोग करना एक हैक जैसा लगता है।

मेरा प्रश्न: float: बूटस्ट्रैप, नींव और अन्य प्रतिक्रियाशील ग्रिड द्वारा उपयोग किया जाता है ताकि पुराने ब्राउज़र में उचित table-cell समर्थन की कमी हो सके? अगर कोई और कारण है, तो मैं भी यह सुनना चाहता हूं। floatinline-blocktable-cell

वे सभी पक्ष और विपक्ष है:

Answer 1

वहाँ लगभग 3 ग्रिड सिस्टम बनाने के लिए तरीके हैं। बूटस्ट्रैप शायद float का उपयोग करता है क्योंकि, एक ढांचा होने के नाते, यह विभिन्न परिदृश्यों में आसानी से अनुकूल होता है।

float विधि की एक बड़ी सीमा यह है कि आप ग्रिड तत्वों को लंबवत रूप से संरेखित नहीं कर सकते हैं, और व्यक्तिगत रूप से मैं inline-block विधि का उपयोग करना पसंद करता हूं।

हालांकि, inline-block विधि की एक समस्या लाता खाली स्थान के जो विभिन्न तरीकों से निर्धारित किया जा सकता है, के रूप में बड़े पैमाने पर क्रिस Coyier से समझाया (क्योंकि ग्रिड आइटम शब्द की तरह हो जाते हैं):

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

table-cell विधि के साथ सबसे बड़ी समस्या मेरी राय में है कि आप केवल एक पंक्ति में ग्रिड तत्व रख सकते हैं क्योंकि आप उन्हें सीएसएस के माध्यम से एक नई लाइन पर नहीं दबा सकते हैं। इसका मतलब है कि प्रत्येक पंक्ति के लिए आपको एक नए कंटेनर तत्व की आवश्यकता होती है, और यह उत्तरदायी डिज़ाइन के लिए बहुत ही लचीला हो जाता है।

Answer 2

मैं सब कुछ है कि Gyo लिखा है और केवल जोड़ना होगा कि मैं पाया है Pure grids (पूर्व YUI3 ग्रिड) इनलाइन-ब्लॉक विधि का एक प्रभावी और क्रॉस-ब्राउज़र अनुकूल आवेदन होने के लिए सहमत हैं। दिलचस्प बात यह है कि इसमें कुछ उपरोक्त फ्लेक्सिबल बॉक्स गुण भी शामिल हैं। हालांकि, एक बड़ी जीत, यदि अंतर्राष्ट्रीयकरण एक आवश्यकता है, तो यह है कि इनलाइन-ब्लॉक स्वचालित रूप से उलट जाता है जब डीआईआर = "आरटीएल" सेट होता है, फ्लोट-आधारित लेआउट के विपरीत (तालिका के बारे में निश्चित नहीं)।