用CSS制作网页过程中可能会碰到图片下面有空隙的问题,最为简单的解决方法就是:
在图片的css中加入:vertical-align:bottom;
效果如下(上:使用前;下:使用后):
演示代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title> CSS解决图片之间有空隙的简单方法 </title> </head> <style> .two img{vertical-align:bottom; display:block; float:left} </style> <body> <div class="one"> <img src="http://192.168.99.134/zb_users/theme/AeroGirl_php/style/images/random/1.jpg" /> <img src="http://192.168.99.134/zb_users/theme/AeroGirl_php/style/images/random/2.jpg" /> <img src="http://192.168.99.134/zb_users/theme/AeroGirl_php/style/images/random/3.jpg" /> </div> <br> <div class="two"> <img src="http://192.168.99.134/zb_users/theme/AeroGirl_php/style/images/random/1.jpg" /> <img src="http://192.168.99.134/zb_users/theme/AeroGirl_php/style/images/random/2.jpg" /> <img src="http://192.168.99.134/zb_users/theme/AeroGirl_php/style/images/random/3.jpg" /> </div> </body> </html>
float:left 为图片横排显示。