码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-09-20 22:52:49      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   os   ar   2014   

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

如何在固定大小的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:    }

效果:

bubuko.com,布布扣

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

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

标签:des   style   blog   http   color   io   os   ar   2014   

原文地址:http://blog.csdn.net/u011043843/article/details/39435271

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!