सीएसएस का उपयोग कर तत्वों को स्वैप करें?

Question

मैं इस तरह काफी सरल लेआउट,:

<div class="card"> 
    <span class="attack">1</div> 
    <span class="defence">2</div> 
</div> 

वे साधारण display: block साथ एक दूसरे के ऊपर पर व्यवस्थित कर रहे हैं। मैं जो हासिल करना चाहता हूं वह यह है कि जब कार्ड विशिष्ट क्षेत्रों में होता है, तो "हमला" नीचे दिखाता है और "रक्षा" शीर्ष पर है। मुझे पता है कि मैं इसे jQuery के साथ बना सकता हूं, लेकिन क्या मैं शुद्ध सीएसएस का उपयोग कर एक ही प्रभाव प्राप्त कर सकता हूं?

Answer 1

तकनीकी रूप से, यह एक व्यवसाय नियम है, जो आपके कॉस्मेटिक परत का डोमेन नहीं है।

एक HTML दस्तावेज़ में, पहले से आखिरी तत्वों के क्रम का अर्थ अर्थपूर्ण अर्थ है - आपका मामला अलग नहीं है, मुझे संदेह है कि आप एक तत्व से अगले तत्व में महत्व में कुछ अंतर इंगित करने की कोशिश कर रहे हैं (में दस्तावेज, न केवल दृश्य प्रतिनिधित्व) संदर्भ के आधार पर।

तो आपका दृष्टिकोण JQuery, या दस्तावेज़ में उनके आदेश के संदर्भ में इन दो तत्वों के रिश्ते के अर्थ को बदलने का कुछ अन्य तरीका होना चाहिए। सीएसएस का उद्देश्य केवल उनकी कॉस्मेटिक उपस्थिति को बदलना है।

इस तरह की स्थितियों के साथ, यह सोचने में मददगार हो सकता है, "क्या होगा यदि कोई तत्व तत्व नहीं देख पा रहा है, और दस्तावेज़ में दिखाई देने के क्रम में उन्हें पढ़ने के लिए स्क्रीन रीडर पर भरोसा करना था? क्या यह जानकारी (न सिर्फ दो तत्वों की सामग्री, बल्कि उनके रिश्ते) अभी भी सही और समझदार हैं? "

आप इस के लिए अंधेरे तक पहुंचने का इरादा नहीं रख सकते हैं, लेकिन अक्सर इस तरह की समस्या से संपर्क करने के लिए एक अच्छी सैनिटी जांच होती है।

Answer 2

पहला विचार .card के भीतर पूर्ण स्थिति का उपयोग करना है।

.card  { width:100px; height:50px; position:relative; } 
    .attack { width:100px; height:25px; position:absolute; top:25px; } 
    .defense { width:100px; height:25px; position:absolute; top:0; } 

इस उदाहरण में, .attack नीचे (दृष्टिहीन) होगा .defense। लेकिन ध्यान दें, अगर आप सीएसएस को अक्षम करते हैं, तो असली व्यवस्था देखी जाएगी।

Answer 3

नहीं, आप नहीं कर सकते। यहां तक ​​कि यदि आपने सीएसएस में इसे "हैक" करने का प्रयास करने का निर्णय लिया है, तो परिणामस्वरूप सीएसएस विशाल, गन्दा, और आसानी से बनाए रखा नहीं जाएगा। इसी jQuery कोड को तुलना करके आसानी से समझ लिया जा सकता है, आसानी से समझा जा सकता है और आसानी से बनाए रखा जा सकता है।

Answer 4

यदि आप तत्व की ऊंचाई जानते हैं, तो आप position: relative (क्रमशः सकारात्मक और नकारात्मक मानों के साथ) या position: absolute का उपयोग कर सकते हैं। लेकिन यह सब बहुत हैकी है और कई साइड इफेक्ट्स के साथ आता है - मैं इसे जावास्क्रिप्ट में करूँगा।

Answer 5

आप का उपयोग करके ऐसा कर सकते हैं (यदि आप केवल div.card में अदला-बदली करना चाहते हैं):

.card .attack { 
    position: relative; 
    top: 1em; 
} 
.card .defence { 
    position: relative; 
    top: -1em; 
} 

लेकिन के रूप में दूसरों का उल्लेख किया है यह कुछ अनायास ही दुष्प्रभाव हो सकता है। जैसे उपरोक्त नमूना केवल 1 लाइन ब्लॉक के लिए स्वैप स्थिति को सही ढंग से ले जाएगा।

Answer 6

मैं बहुत यकीन है कि यह काम करेगा हूँ:

.card { 
    width: 100px; 
    height: 150px; 
    float: left; 
} 

.attack, .defence { 
    width: 100px; 
    height: 75px; 
    clear: right; 
} 

/* Play with height and padding-top of .defence to 
get the text to the very bottom */ 
.attack-top .card .attack { 
    float: left; 
} 
.attack-top .card .defence { 
    float: right; 
    height: Wpx; 
    padding-top: Xpx; 
} 


/* Play with height and padding-top of .attack to 
get the text to the very bottom */ 
.defence-top .card .attack { 
    float: right; 
    height: Ypx; 
    padding-top: Zpx; 
} 
.defence-top .card .defence { 
    float: left; 
} 

अपने विवरण में लापता कुछ विवरण हैं, इसलिए मैं अपने मान्यताओं में भरने की कोशिश करता हूँ, और आप मुझे बताएं कि वे 'दे सकते हैं फिर वैध या नहीं।

• आपने कहा "जब कोई कार्ड विशिष्ट क्षेत्रों में होता है"।मुझे लगता है कि इन क्षेत्रों का प्रतिनिधित्व विभिन्न वर्गों (.attack-top और .defence-top द्वारा किया जा सकता है, लेकिन जैसा कि आप फिट देखते हैं) नाम बदलें।
• मुझे लगता है कि .card 100px चौड़ा और 150px लंबा है। यदि ये चौड़ाई और ऊंचाई मान गलत हैं, तो सही लोगों को भरें और उपयुक्त पुनर्मूल्यांकन करें। यदि .card की निश्चित चौड़ाई/ऊंचाई नहीं है, तो यह अभी भी काम कर सकती है, लेकिन मुझे कम आत्मविश्वास है, और आप कार्ड के बहुत नीचे जाने के लिए नीचे पाठ प्राप्त नहीं कर पाएंगे (बस शीर्ष पाठ के नीचे)।