स्थिति वाले तत्वों पर लंबवत स्थान: पूर्ण

Question

मैं position:absolute और गतिशील ऊंचाई के साथ तत्व कैसे बना सकता हूं केवल सीएसएस का उपयोग करके लंबवत स्थान पर कब्जा कर सकता हूं? क्या कंटेनरों और डिस्प्ले के साथ कोई चाल है जिसका मैं उपयोग कर सकता हूं?

Answer 1

दुर्भाग्यवश, पूर्ण स्थिति का उपयोग करके, परिभाषा के अनुसार, आपका तत्व अब स्थान नहीं ले रहा है। तो नहीं, केवल सीएसएस के माध्यम से ऐसा करने का कोई तरीका नहीं है।

आप इसे पूरा करने के लिए निश्चित रूप से jQuery (या सादा जावास्क्रिप्ट) का उपयोग कर सकते हैं। मैं कैसे करूँगा यह प्रत्येक लंबवत तत्व के बगल में space तत्व है। अपेक्षाकृत स्थित div में अंतरिक्ष तत्व और बिल्कुल स्थित लंबवत तत्व दोनों को संलग्न करें। पृष्ठ लोड पर, लंबवत तत्व की ऊंचाई से मेल खाने के लिए स्पेस तत्व के height को बदलें।

Answer 2

position: absolute का अर्थ है कि वे प्रवाह में जगह पर कब्जा नहीं करते हैं। हालांकि, आपको मार्जिन का उपयोग करके एनिमेट करने की आवश्यकता नहीं है, आप float का उपयोग कर सकते हैं ताकि तत्वों को जो भी स्थान ले सकें, और प्रत्येक तत्व position:relative बना सकें।

div.animate-me { 
    width: 300px; 
    margin: 20px; 
    float: left; 
    left: -1000px; // Make them start offscreen 
    position: relative; 
    border: 1px solid red; 
    visibility: hidden 
}​ 

$('div').css().animate({ 
    left: 0 
}); 

SAMPLEhttp://jsfiddle.net/qxzzX/1/