这是贴友问的一个问题，具体需求是：

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

问题：如何在固定大小的DIV层插入N多个图片的更多相关文章

  1. fusioncharts的3D饼图固定大小和角度

    3D饼图的pieRadius和startingAngle属性 pieRadius:饼图的半径 startingAngle:饼图的角度(旋转) 在固定大小的div里面,饼图上如果显示label或者val ...

  2. 页面固定DIV层CSS代码

    有时候为了用户体验更好些,网页设计师会把网站导航放在一个固定的DIV层里面,不随滚动条滚动.本方法是利用CSS,position:fixed属性来固定层,fixed是特殊的absolute,即fixe ...

  3. JavaScript学习之DIV层与图像

    DIV层与图像 一.设计一个可定位的层 1.设置位置(position)和大小 (1)绝对定位(absolute):以页面边框为参照,只要设置好绝对位置,那么元素的位置会始终固定在距离边框某个位置的距 ...

  4. 精解Mat类(一)：基本数据类型-固定大小的 矩阵类(Matx) 向量类(Vector)

    一.基础数据类型 1.(基础)固定大小矩阵类 matx 说明: ①    基础矩阵是我个人增加的描述,相对于Mat矩阵类(存储图像信息的大矩阵)而言. ②    固定大小矩阵类必须在编译期间就知晓其维 ...

  5. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  6. js弹出div层,弹出层页面底部出现UL出现一条线问题

    整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...

  7. mui在tab选项卡中echarts图表不能动态随页面变化大小 只能固定大小

    在mui tab选项卡中一直都不能让echarts动态变化大小 只能固定大小来展示图表,网上说的window.onresize = mycharts.resize;方法根本就没有效果,后面在https ...

  8. CSS 如何使DIV层水平居中

    今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过 ...

  9. textarea 在浏览器中固定大小和禁止拖动

    HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 ...

随机推荐

  1. asp.net中js和jquery调用ashx的不同方法分享

    代码如下: var xhr = new XMLHttpRequest();            xhr.open("get", 'Controls/gengCart.ashx?C ...

  2. PAT-乙级-1032. 挖掘机技术哪家强(20)

    1032. 挖掘机技术哪家强(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 为了用事实说明挖掘机技术到底 ...

  3. HTML可编辑下拉框

    <div style="position:relative;">   <select style="width:120px;" onchang ...

  4. 【形式化方法：VDM++系列】2.VDMTools环境的搭建

    接前文:http://www.cnblogs.com/Kassadin/p/3975853.html 上次讲了软件需求分析的演化过程,本次进入正题——VDM开发环境的搭建 (自从发现能打游戏以来,居然 ...

  5. OSharp框架总体设计

    OSharp框架解说系列(1):总体设计 〇.前言 哈,距离前一个系列<MVC实用构架设计>的烂尾篇(2013年9月1日)已经跨了两个年头了,今天是2015年1月9日,日期已经相映,让我们 ...

  6. Java的类演进过程

    1.从面向过程到面向对象 在大家最熟悉的C语言中,如果要定义一个复杂的数据类型就用结构体(Struct)来实现,而为结构体的每个操作都定义一个函数,这个函数与结构体本身的定义没有任何关系.程序的重心集 ...

  7. 浩顺AC671指纹考勤机二次开发(demo)

    关于考勤机 AC671,是新换的机器,以前的那部机器,通过网络死活连接不上,换了AC671网络连接是好用了.但是,我要吐槽 浩顺的考勤机应该是卖了很多了吧,可是自带的软件太不给力,最后分析出来的数据一 ...

  8. Java面试题-Java中的锁

    1. 如何实现乐观锁(CAS)?如何避免ABA问题? 答:1)读取内存值的方式实现了乐观锁(比如:SVN系统),方法:第一,比较内存值和期望值:第二,替换内存值为要替换值.        2)带参数版 ...

  9. Eclipse环境下JBoss调试，解决引用的工程不被部署的问题

    其实算是一个很小的经验,在eclipse环境下进行jboss的部署,因为要定义某公共包的问题,将代码down下来做了个工程,部署时发现jboss提示:class not found! 从jboss部署 ...

  10. poj3041，poj2226

    二分匹配的灵活运用 3041还是比较好想的,考虑到横排/竖排射一枪就能搞定这一行/一列的所有点, 我们以行数为点集x,列数为点集y,在目标点(xi,yi)之间连一条边 这样最小射击次数=最小点覆盖(边 ...