एक दूसरे के बगल में एक छवि को कैसे रखें

Question

मैं इन दोनों 'हाइपरलिंक्ड' आइकन को एक-दूसरे के बगल में रखने की कोशिश कर रहा हूं लेकिन मुझे ऐसा नहीं लगता है। आप देख सकते हैं, चहचहाना आइकन अगली पंक्ति में गिर जाता है .. (वे दोनों अपने-अपने वेबसाइट से हाइपरलिंक कर रहे हैं)

एचटीएमएल

<div class="nav3" style="height:705px;"> 
    <div id="icons"><a href="http://www.facebook.com/"><img src="images/facebook.png"></a> 
    </div> 
    <div id="icons"><a href="https://twitter.com"><img src="images/twitter.png"></a> 
    </div> 
</div> 

सीएसएस

.nav3 { 
    background-color: #E9E8C7; 
    height: auto; 
    width: 150px; 
    float: left; 
    padding-left: 20px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #333333; 
    padding-top: 20px; 
    padding-right: 20px; 
} 

#icons{position:relative; 
    width: 64px; 
    height: 64px; 
    } 

    #icons a:hover { 
    background: #C93; 
     display: block; 

} 

मैं एक-दूसरे के आगे गठबंधन कैसे करूं?

अग्रिम

Answer 1

#icons में position:relative उपयोग करने के बजाय

धन्यवाद, आप सिर्फ इतना है कि दूर ले सकता है और हो सकता है एक z- सूचकांक या कुछ जोड़ सकते हैं ताकि चित्र ऊपर कवर नहीं किया जाएगा। उम्मीद है की यह मदद करेगा।

Answer 2

आपको div की आवश्यकता नहीं है।

HTML:

<div class="nav3" style="height:705px;"> 
    <a href="http://www.facebook.com/" class="icons"><img src="images/facebook.png"></a> 
    <a href="https://twitter.com" class="icons"><img src="images/twitter.png"></a> 
</div> 

सीएसएस:

.nav3 { 
    background-color: #E9E8C7; 
    height: auto; 
    width: 150px; 
    float: left; 
    padding-left: 20px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #333333; 
    padding-top: 20px; 
    padding-right: 20px; 
} 

.icons{ 
    display:inline-block; 
    width: 64px; 
    height: 64px; 
    } 

a.icons:hover { 
    background: #C93; 
} 

देखें पार करने वाली div this fiddle

Answer 3

बदलें। और अंतरिक्ष   एचटीएमएल

<div class="nav3" style="height:705px;"> 
<span class="icons"><a href="http://www.facebook.com/"><img src="images/facebook.png"></a> 
</span>&nbsp;&nbsp;&nbsp; 
<span class="icons"><a href="https://twitter.com"><img src="images/twitter.png"></a> 
</span> 
</div> 

सीएसएस

.nav3 { 
background-color: #E9E8C7; 
height: auto; 
width: 150px; 
float: left; 
padding-left: 20px; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #333333; 
padding-top: 20px; 
padding-right: 20px; 
} 

.icons{ 
display:inline-block; 
width: 64px; 
height: 64px; 
} 

a.icons:hover { 
background: #C93; 
} 

अवधि का उपयोग कर माउस लाइन तोड़ने नहीं करता है, div करता है।

Answer 4

इसे देखें। बस फ्लोट का उपयोग करें और रिश्तेदार से छुटकारा पाएं।

http://jsfiddle.net/JhpRk/

#icons{float:left;}