我想知道我如何能夠在每幅圖片的左上方有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
感謝。
任何幫助將不勝感激 – ogmo22
把所有的三個圖標,第一個div外'divWithBtn' – ketan
不,似乎不工作 – ogmo22