html - Auto Adjusting the Size of Images and/or Icons On the Same Line -
imagine social media icons/images (e.g. facebook, twitter, linkedin) lined next each other on same line. how can make size of icons/images auto adjust when add additional icons/images line? right jump next line. want where, if add icons/images, smaller, stay on same line; if take icons/images away, larger fit width of container.
thank help!
update:
<div class="padding"><a href="http://www.facebook.com"><img class="image" src="images/black_white_facebook.png" alt="facebook icon" /></a></div> <div class="padding"><a href="http://www.twitter.com"><img class="image" src="images/black_white_twitter.png" alt="twitter icon" /></a></div> <div class="padding"><a href="http://www.linkedin.com"><img class="image" src="images/black_white_linkedin.png" alt="linked in icon" /></a></div> <div class="padding"><a href="http://www.wordpress.com"><img class="image" src="images/black_white_wordpress.png" alt="wordpress icon" /></a></div> <div class="padding"><a href="http://www.youtube.com"><img class="image" src="images/black_white_youtube.png" alt="youtube icon" /></a></div> <div class="padding"><a href="http://www.plus.google.com"><img class="image" src="images/black_white_google_plus.png" alt="google+ icon" /></a></div> </div><!-- end of icons div -->
icons {margin: 0 auto; text-align: center;}
.image {width: 150px; background-color: white; padding: 2px;}
.padding {display: inline; padding-right: 6px;}
i think should put each content: text, icon in different , put these in line width , height want
Comments
Post a Comment