欢迎访问:我爱bear - 你可记得 三月初 初相遇雨橙 我曾忆起 初春时 时景逢雨萱
  
你现在的位置: 首页 脚本样式 正文
CSS解决图片之间有空隙的简单方法

用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 为图片横排显示。

发布日期:2016年12月13日 14:04:31     所属分类:脚本样式
版权声明:本文创建于 7 年 前,由 烟敛寒叶 发表,共 2382 字
转载请注明:CSS解决图片之间有空隙的简单方法 (PS:如果是原创,哈哈。。。)
 
 
 
  
目前浏览:3327     暂无评论
该文章还没有评论,赶快抢占沙发吧!

  
网站简介
Z-blog 爱好者,个人博客粉丝,鼓捣主题制作,然而并不懂什么代码,乱乱唱。
本站建于 2010-04-26 已有 14 年
  • 文章总数:79
  • 页面总数:2
  • 分类总数:9
  • 标签总数:1
  • 评论总数:266
  • 浏览总数:398930
关于博客
5ibear 个人博客纯属个人娱乐博客,主要涵盖了天文地理、奇门遁甲、阴阳五行八卦及一切关乎于宇宙和平的 * *。博客“宗旨”:把个人制作累积的东东,分享给最需要的读者,“专研”主题制作,然而并不懂什么代码。乱乱唱,唱我们的歌,风在大,我们都在这儿。。。。
Copyright © 2016-2017 我爱bear 保留所有权利 基于 Z-blog 技术创建 Theme by 烟敛寒叶 渝ICP备10202287号-2
(若本站无意侵犯了您的版权,请邮件致 yiyehanlin@qq.com 处理,谢谢!)
渝公网安备 50022502000121 号
歌曲 - 歌手
0:00