问题:如何在固定大小的DIV层插入N多个图片_html/css_WEB-ITnose

这是贴友问的一个问题,具体需求是:

何在固定大小的DIV层插入N多个图片,使其一行排列,超出层宽时出现滑动条?

原以为利用overflow属性可以实现,但是测试失败。后来利用div层叠实现了效果。

HTML代码:

   1: 

登录后复制

   2:      
   3: 

登录后复制

   4: 

登录后复制

   5: 

登录后复制

   6: 

登录后复制

   7: 

登录后复制

   8:    
   9:         
问题:如何在固定大小的DIV层插入N多个图片_html/css_WEB-ITnose

登录后复制

  10:         
问题:如何在固定大小的DIV层插入N多个图片_html/css_WEB-ITnose

登录后复制

  11:         
问题:如何在固定大小的DIV层插入N多个图片_html/css_WEB-ITnose

登录后复制

  12:    

登录后复制

  13: 

登录后复制

  14: 

登录后复制

css控制样式:

立即学习“前端免费学习笔记(深入)”;

   1: .div{

登录后复制

   2:        width:400px;

登录后复制

   3:        height:200px;

登录后复制

   4:        overflow-y:hidden;  /*只出现水平滚动条*/

登录后复制

   5:        position: absolute;

登录后复制

   6:    }

登录后复制

   7:    .div1{

登录后复制

   8:        position:absolute;

登录后复制

   9:        z-index:1;

登录后复制

  10:    }

登录后复制

  11:    .div2{

登录后复制

  12:        position:absolute;

登录后复制

  13:        z-index:5;

登录后复制

  14:        left:200px;

登录后复制

  15:        top:0px

登录后复制

  16:    }

登录后复制

  17:    .div3{

登录后复制

  18:        position:absolute;

登录后复制

  19:        z-index:10;

登录后复制

  20:        left:400px;

登录后复制

  21:        top:0px

登录后复制

  22:    }

登录后复制

效果:

来源:http://www.ido321.com/666.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2839673.html

(0)
上一篇 2025年3月9日 14:00:32
下一篇 2025年3月9日 14:00:47

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论