सीएसएस

Question

में "बेहतर" फ़्लोटिंग मैं सीएसएस और फ्लोट संपत्ति के साथ प्रयोग कर रहा हूं। मैं इस "वेबसाइट", 80px ग्रिड और float: left के अनुरूप divs का एक बहुत साथ है:

वहाँ सीएसएस में एक तरह से बनाते हैं यह इस तरह लग रही है - तो तत्वों उनके ऊपर खाली जगह का उपयोग कर सकते ?

जावास्क्रिप्ट बिना

, अगर यह संभव है।

धन्यवाद, मार्टिन।

Answer 1

दोनों क्षैतिज और खड़ी गतिशील सामग्री खपरैल का छत के लिए, सीएसएस विकल्प हैं:

• float:left, के रूप में आप पहले से ही देखा है, केवल सीमित क्षैतिज टाइलिंग प्रदान करता है।
• display:inline-blockfloat:left से भिन्न परिणाम देता है, लेकिन कोई टाइलिंग के साथ।
• CSS multi-column layout अभी तक पूरी तरह से परिभाषित नहीं है। यह निहित कॉलम में लंबवत प्रवाह का समर्थन करता है, लेकिन शायद इस तरह से नहीं है कि टाइलिंग के रूप में योग्यता प्राप्त हो।
• flexible box layout अभी तक समर्थित नहीं है। यह एक प्रकार का क्षैतिज या लंबवत प्रवाह का समर्थन करता है जो शायद टाइलिंग के रूप में योग्य नहीं हो सकता है, हालांकि यह सही दिशा में एक कदम की तरह लगता है।

संक्षेप में, यहां तक ​​कि सीएसएस मानक जो पूरी तरह परिभाषित नहीं हैं अभी तक इसका समर्थन नहीं करते हैं; तो यह एक लंबा रास्ता हो सकता है। सबसे आसान फॉलबैक विकल्प एक jQuery प्लग-इन का उपयोग करना है।

Masonry के अलावा (जैसा कि @ बिली मोट सुझाव दिया गया है), एक और जोड़े jQuery प्लग-इन Isotope और Tiles Gallery हैं। लगता है कि चिनाई का सबसे अधिक उल्लेख किया जाता है।

Answer 2

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

http://masonry.desandro.com/

Answer 3

का कहना है कि px की संख्या को भरने के लिए 1 ब्लॉक के अंतरिक्ष 50px है ऊपर जाने के लिए अनुमति देता है। margin-top: -50px;

यह जादू नहीं है, यह प्रत्येक के लिए ऐसा करने के लिए केवल एक छोटा सा मैनुअल है। यदि आपकी सामग्री गतिशील है, तो यह काम नहीं कर सका, या गणना करने के लिए जेएस की आवश्यकता है अगर हमें कई पंक्तियों और सब कुछ पर जाने की आवश्यकता है या नहीं।

Answer 4

यह किया जा सकता है, लेकिन चूंकि सीईई कहता है, यदि आपकी सामग्री गतिशील है, तो यह सबसे खराब संभव तरीकों से गलत हो जाएगी।

लेकिन यदि यह एक स्थिर साइट है, तो यह सुनिश्चित किया जा सकता है।

इसे हल करने के लिए, ब्लॉक & समूह में सोचें और उन्हें संरेखित करें, प्रत्येक ब्लॉक के अंदर सभी ब्लॉक फिर से संरेखित करें।