首页 > 网站 > WEB开发 > 正文

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

2024-04-27 14:32:24
字体:
来源:转载
供稿:网友
问题:如何在固定大小的DIV层插入N多个图片

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

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

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

HTML代码:

   1: <!-- 如何在固定大小的DIV层插入N多个图片,使其一行排列,超出层宽时出现滑动条? -->
   2: <!DOCTYPE html>
   3: <html>
   4: <head>
   5: <meta http-equiv="content-type" content="text/html;charset=utf-8">
   6: </head>
   7: <body>
   8:    <div class="div">
   9:         <div class="div1"><img src="test1.jpg"></div>
  10:         <div class="div2"><img src="test2.jpg"></div>
  11:         <div class="div3"><img src="test3.jpg"></div>
  12:    </div>
  13: </body>
  14: </html>

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表