सीएसएस

Question

के साथ बाएं और दाएं पोजीशनिंग को बदलना तो PHP का उपयोग करके मैं छवियों का एक पृष्ठ प्रदर्शित कर रहा हूं। मेरे पास इन चित्रों को रखने के लिए एक div टैग है।

मैं क्या करने की कोशिश कर रहा हूं, ब्राउज़र के बाएं और दाएं किनारे पर इन छवियों को वैकल्पिक स्थिति में रखता है।

तो प्रविष्टि 1 छोड़ दिया नीचे स्क्रॉल पर तैनात है प्रविष्टि 2 सही पर स्थिति में है आदि

मेरी div कंटेनर style="position:relative;width=100%" मैं अपनी छवियों को छोड़ दिया और की ओर गले वैकल्पिक कैसे कर सकता हूँ है ब्राउज़र?

Answer 1

बाएं Huggers के लिए

:

style="float:left;clear:left;" 

और सही huggers

style="float:right;clear:right;" 

के लिए ... हालांकि अगर अपने कंटेनर विस्तृत 2 छवियों भर में अधिक से अधिक फिट करने के लिए पर्याप्त है, तो आप नहीं है "स्पष्ट" घोषणाओं की आवश्यकता नहीं होगी।

Answer 2

सेट float: left; जब index%2 == 0 और float: right; जब index%2==1 index अपनी छवियों पर एक पाश-बार दोहराना के एक सूचकांक चर जा रहा है।

Answer 3

कई संभावित तरीके हैं, एक निम्न होगा:

सीएसएस:

div img{ 
float:left; 
clear:both;  
} 
div img:nth-of-type(2n){ 
    float:right; 
} 

Example

की जाँच करें कि आप उन्हें उस तरह से वैकल्पिक चाहते हैं, तो उपयोग

div img{ 
float:left; 
clear:left;  
} 
div img:nth-of-type(2n){ 
    float:right; 
    clear:right; 
} 

उन ब्राउज़रों के आधार पर जिन्हें आप समर्थन करना चाहते हैं (इंटरनेट एक्सप्लोरर 8 और निचले उस चयनकर्ता का समर्थन नहीं करते हैं), सभी वर्गों पर एक वर्ग का उपयोग करें और उस श्रेणी के साथ :nth-of-type(2n) को प्रतिस्थापित करें।

Answer 4

अन्य उत्तर

लिए एक समान नस में

div img:nth-child(even) { float: right; clear: right; } 
div img:nth-child(odd) { float: left; clear: left; } 

डेमो: http://jsfiddle.net/GL667/