2016-01-02 51 views
0

Image如何讓社交媒體圖標排列在圖片上方?

我想知道我如何能夠在每幅圖片的左上方有3個社交媒體圖標,但符合圖像。以下是我的代碼。

body { 
 
\t background-color: #1a1a1a; 
 
} 
 

 
#downloadbutton{ 
 
\t width:127px; 
 
\t height:48px; 
 
\t text-align: center; 
 
\t /* text-indent:-9999px; */ 
 
\t border:none; 
 
\t margin-top:20px; 
 
\t cursor:pointer; 
 
} 
 

 
#downloadbuttonhover:hover{ 
 
\t color:#fff; 
 
\t background-color: #b40000; 
 
\t opacity:0.9; 
 
} 
 

 

 
.buttonDownload{ 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t padding: 10px 25px; 
 
    
 
\t background-color: #b30000; 
 
\t color: white; 
 
    
 
\t font-family: 'Oswald', sans-serif; 
 
\t text-decoration: none; 
 
\t font-size: 0.9em; 
 
\t text-align: center; 
 
\t text-indent: 15px; 
 
} 
 

 
.buttonDownload:hover { 
 
\t background-color: #333; 
 
\t color: white; 
 
} 
 

 
.buttonDownload:before, .buttonDownload:after { 
 
\t content: ' '; 
 
\t display: block; 
 
\t position: absolute; 
 
\t left: 15px; 
 
\t top: 52%; 
 
} 
 

 
/* Download box shape */ 
 
.buttonDownload:before { 
 
\t width: 10px; 
 
\t height: 2px; 
 
\t border-style: solid; 
 
\t border-width: 0 2px 2px; 
 
} 
 

 
/* Download arrow shape */ 
 
.buttonDownload:after { 
 
\t width: 0; 
 
\t height: 0; 
 
\t margin-left: 3px; 
 
\t margin-top: -7px; 
 
    
 
\t border-style: solid; 
 
\t border-width: 4px 4px 0 4px; 
 
\t border-color: transparent; 
 
\t border-top-color: inherit; 
 
\t 
 
\t animation: downloadArrow 2s linear infinite; 
 
\t animation-play-state: paused; 
 
} 
 

 
.buttonDownload:hover:before { 
 
\t border-color: #b30000; 
 
} 
 

 
.buttonDownload:hover:after { 
 
\t border-top-color: #b30000; 
 
\t animation-play-state: running; 
 
} 
 

 
.clearfix { 
 
    clear: both; 
 
} 
 

 
.divWithBtn { 
 
\t display: inline-block; 
 
} 
 

 
.divWithBtn a{ 
 
    display: block; 
 
    margin: 0 auto; 
 
}
<div class="container"> 
 
</br> 
 
\t <span class="textformat1"><center><b>Albums</b></span></center> 
 
</br> 
 

 

 

 
<div id="sharebar"> 
 
    <a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="www.tekmillion.com" data-text="TekMillion - Download Albums http://www.tekmillion.com/albums.html" data-via="tekmill">Tweet</a> 
 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
 
<hr> 
 
<div class="fb-share-button" data-href="http://www.tekmillion.com/albums.html" data-layout="button_count"></div> 
 
</div> 
 
<script>var switchTo5x=true;</script> 
 
<script src="//w.sharethis.com/button/buttons.js"></script> 
 

 

 

 
<center> 
 
\t <div class="clear"> 
 
\t \t <div class="divWithBtn"> 
 
\t \t \t <img src="socialmedia/twitterwhiteandblack.png" alt="twitterwhiteandblack" width="30" height="30"> 
 
\t \t \t <img src="socialmedia/googlepluswhiteandblack.png" alt="googlepluswhiteandblack" width="30" height="30"> 
 
\t \t \t <img src="socialmedia/facebookwhiteandblack.png" alt="facebookwhiteandblack" width="30" height="30"> 
 
\t \t \t <img src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" \t \t \t \t \t width="200" height="200"> 
 
\t \t <a href="LONDON%202%20TURKEY%20VOL.1.zip"> 
 
\t \t \t <img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a> 
 
\t \t </div> 
 
\t <div class="divWithBtn"> 
 
\t \t <img src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT \t \t %20COVER)" width="200" height="200" border:none;> 
 
\t \t \t <a href="LONDON%202%20TURKEY%20VOL.2.zip"> 
 
\t \t <img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a> 
 
\t </div> 
 
\t \t <div class="divWithBtn"> 
 
\t \t \t <img src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front \t \t \t \t \t %20Cover)" width="200" height="200"> 
 
\t \t <a href="LOVE%20%26%20HATE%20VOL.1.zip"> 
 
\t <img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a> 
 
\t \t </div> 
 
\t <div class="divWithBtn"> 
 
\t \t <img src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="200" \t \t height="200"> 
 
\t <a href="GURBET%20ELI%20VOL.1.zip"> 
 
\t \t <img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a> 
 
\t \t </div> 
 
\t </div> 
 
</center> 
 
</br> 
 
</div>

你可以看到專輯圖片和鏈接的鏈接:http://tekmillion.com/albums.html

感謝。

+0

任何幫助將不勝感激 – ogmo22

+0

把所有的三個圖標,第一個div外'divWithBtn' – ketan

+0

不,似乎不工作 – ogmo22

回答

0

把你的圖標外部放在新的div與類.divWithBtn

注:在這裏,我已設置降低的高度和寬度,以顯示它適當的。

body { 
 
\t background-color: #1a1a1a; 
 
} 
 

 
#downloadbutton{ 
 
\t width:127px; 
 
\t height:48px; 
 
\t text-align: center; 
 
\t /* text-indent:-9999px; */ 
 
\t border:none; 
 
\t margin-top:20px; 
 
\t cursor:pointer; 
 
} 
 

 
#downloadbuttonhover:hover{ 
 
\t color:#fff; 
 
\t background-color: #b40000; 
 
\t opacity:0.9; 
 
} 
 

 

 
.buttonDownload{ 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t padding: 10px 25px; 
 
    
 
\t background-color: #b30000; 
 
\t color: white; 
 
    
 
\t font-family: 'Oswald', sans-serif; 
 
\t text-decoration: none; 
 
\t font-size: 0.9em; 
 
\t text-align: center; 
 
\t text-indent: 15px; 
 
} 
 

 
.buttonDownload:hover { 
 
\t background-color: #333; 
 
\t color: white; 
 
} 
 

 
.buttonDownload:before, .buttonDownload:after { 
 
\t content: ' '; 
 
\t display: block; 
 
\t position: absolute; 
 
\t left: 15px; 
 
\t top: 52%; 
 
} 
 

 
/* Download box shape */ 
 
.buttonDownload:before { 
 
\t width: 10px; 
 
\t height: 2px; 
 
\t border-style: solid; 
 
\t border-width: 0 2px 2px; 
 
} 
 

 
/* Download arrow shape */ 
 
.buttonDownload:after { 
 
\t width: 0; 
 
\t height: 0; 
 
\t margin-left: 3px; 
 
\t margin-top: -7px; 
 
    
 
\t border-style: solid; 
 
\t border-width: 4px 4px 0 4px; 
 
\t border-color: transparent; 
 
\t border-top-color: inherit; 
 
\t 
 
\t animation: downloadArrow 2s linear infinite; 
 
\t animation-play-state: paused; 
 
} 
 

 
.buttonDownload:hover:before { 
 
\t border-color: #b30000; 
 
} 
 

 
.buttonDownload:hover:after { 
 
\t border-top-color: #b30000; 
 
\t animation-play-state: running; 
 
} 
 

 
.clearfix { 
 
    clear: both; 
 
} 
 

 
.divWithBtn { 
 
\t display: inline-block; 
 
    width: 100px; 
 
} 
 

 
.divWithBtn a{ 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
.socialIcon > a{ 
 
    display:inline; 
 
    }
<div class="container"> 
 
</br> 
 
\t <span class="textformat1"><center><b>Albums</b></span></center> 
 
</br> 
 

 

 

 
<div id="sharebar"> 
 
    <a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="www.tekmillion.com" data-text="TekMillion - Download Albums http://www.tekmillion.com/albums.html" data-via="tekmill">Tweet</a> 
 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
 
<hr> 
 
<div class="fb-share-button" data-href="http://www.tekmillion.com/albums.html" data-layout="button_count"></div> 
 
</div> 
 
<script>var switchTo5x=true;</script> 
 
<script src="//w.sharethis.com/button/buttons.js"></script> 
 

 

 

 
<center> 
 
\t <div class="clear"> 
 
     <div class="divWithBtn"> 
 
\t \t \t <img src="http://tekmillion.com/images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" \t \t \t \t \t width="100" height="100"> 
 
\t \t <a href="LONDON%202%20TURKEY%20VOL.1.zip"> 
 
\t \t \t <img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a> 
 
      <div class="socialIcon"> 
 
      <a href="link"> 
 
      <img src="http://tekmillion.com/images/Twitter.png" alt="twitterwhiteandblack" width="30" height="30"></a> 
 
      <a href="link"> 
 
\t \t \t <img src="http://tekmillion.com/images/Twitter.png" alt="googlepluswhiteandblack" width="30" height="30"></a> 
 
      <a href="link"> 
 
\t \t \t <img src="http://tekmillion.com/images/Twitter.png" alt="facebookwhiteandblack" width="30" height="30"></a> 
 
     </div> 
 
\t \t </div> 
 
\t <div class="divWithBtn"> 
 
\t \t <img src="http://tekmillion.com/images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT \t \t %20COVER)" width="100" height="100" border:none;> 
 
\t \t \t <a href="LONDON%202%20TURKEY%20VOL.2.zip"> 
 
\t \t <img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a> 
 
     <div class="socialIcon"> 
 
      <img src="http://tekmillion.com/images/Twitter.png" alt="twitterwhiteandblack" width="30" height="30"> 
 
\t \t \t <img src="http://tekmillion.com/images/Twitter.png" alt="googlepluswhiteandblack" width="30" height="30"> 
 
\t \t \t <img src="http://tekmillion.com/images/Twitter.png" alt="facebookwhiteandblack" width="30" height="30"> 
 
     </div> 
 
\t </div> 
 
\t \t <div class="divWithBtn"> 
 
\t \t \t <img src="http://tekmillion.com/images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="Love%20%26%20Hate%20Volume.1%20(Front \t \t \t \t \t %20Cover)" width="100" height="100"> 
 
\t \t <a href="LOVE%20%26%20HATE%20VOL.1.zip"> 
 
\t <img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a> 
 
      <div class="socialIcon"> 
 
      <img src="http://tekmillion.com/images/Twitter.png" alt="twitterwhiteandblack" width="30" height="30"> 
 
\t \t \t <img src="http://tekmillion.com/images/Twitter.png" alt="googlepluswhiteandblack" width="30" height="30"> 
 
\t \t \t <img src="http://tekmillion.com/images/Twitter.png" alt="facebookwhiteandblack" width="30" height="30"> 
 
     </div> 
 
\t \t </div> 
 
\t <div class="divWithBtn"> 
 
\t \t <img src="http://tekmillion.com/images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="100" \t \t height="100"> 
 
\t <a href="GURBET%20ELI%20VOL.1.zip"> 
 
\t \t <img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a> 
 
     <div class="socialIcon"> 
 
      <img src="http://tekmillion.com/images/Twitter.png" alt="twitterwhiteandblack" width="30" height="30"> 
 
\t \t \t <img src="http://tekmillion.com/images/Twitter.png" alt="googlepluswhiteandblack" width="30" height="30"> 
 
\t \t \t <img src="http://tekmillion.com/images/Twitter.png" alt="facebookwhiteandblack" width="30" height="30"> 
 
     </div> 
 
\t \t </div> 
 
\t </div> 
 
</center> 
 
</br> 
 
</div>

編輯:

根據您的要求把你的圖標,新的div喜歡在代碼中,我把它放在socialIcon股利。並把它放在下載按鈕下面。

您可以將圖像放在錨標籤中。

並給以下css讓你的鏈接線。

.socialIcon > a{ 
    display:inline; 
    } 
+0

我想在每張圖片的每張圖片或每張圖片的上面下載下載按鈕下有一組3個社交媒體圖標。 – ogmo22

+0

@ ogmo22我編輯了答案。請檢查。 – ketan

+0

我可以添加一個href嗎?到每個社交媒體圖標?他們仍然內聯,並在每個下載按鈕下? – ogmo22