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

时间: 2024-10-26 21:47:57

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

如何精确定位固定大小的div在网页的中间位置并且不随分辨率的设置改变(位置大小都不变)

所有的框模型一开始都是按文档中正常的元素流定位,而定位position属性允许我们改变这些自然的位置.通过利用一些简单的Css规则,position使得设计者可以将HTML元素精确放置,position属性确定了每个元素框(box)定位的参考点. 在详细介绍之前,我们先简要的说明一下定位的4种方法: 1.静止定位(static):这种方法使得所有的元素最终位置都是一个静止位置.所以没有什么需要特殊说的. 2.绝对定位(absolute):这种方法允许用户指定元素的左上角.右下角或者其他的参考点和

怎么在图片上面加个div层,让它浮于图片上方

1.首先当然是要插入一张图片啦,代码如下:<a href="#" target="_blank"><img src="images/13.png" width="240" heigth="240"></a>图片路径自己定义. 2.定义一个层在图片上.这里要用到定位.position.<div class="con_img"><img

页面固定DIV层CSS代码

有时候为了用户体验更好些,网页设计师会把网站导航放在一个固定的DIV层里面,不随滚动条滚动.本方法是利用CSS,position:fixed属性来固定层,fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位.这样网站导航布局好看些,以下是实现的一种方法: #box { height:45px;/*高度*/ background:#488fce;/*背景颜色*/ width:100%;/*宽度*/ position:fixed;/*固定层*/ top

Fixed固定位置的悬浮div层

固定位置的Js悬浮窗口,为了便于查看效果,测试时用随机函数产生一定的内容,与浮动窗口的控制无关,不想用可以去掉.代码内有注释. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

拖动鼠标改变div层的大小宽度

<html> <head> <title>拖动鼠标改变div层的大小宽度-石家庄色彩顾问-亿诚</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style> { box-sizing: border-box; moz-box-sizing: border-box } #testDiv {

JavaScript学习之DIV层与图像

DIV层与图像 一.设计一个可定位的层 1.设置位置(position)和大小 (1)绝对定位(absolute):以页面边框为参照,只要设置好绝对位置,那么元素的位置会始终固定在距离边框某个位置的距离. 绝对定位有两个属性:left和top,分别是距离网页左边和网页顶部的绝对位置,可借助style属性直接设置: style="position:absolute;left:距离左边距离;top:距离顶部距离" (2)相对定位(relative):需要有一个参照元素,设置好相对位置和参照

CSS+JS实现的div层定位功能和自动消失

CSS顶部固定功能,有空的时候研究了一下CSS的定位功能,做了这个大家熟悉的顶部固定功能,鼠标移上去顶部会消失,并可判断浏览器是否支持audio元素!顶部元素在时间控制下也可自动消失. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

点击超链接字段时弹出登录系统DIV层

先给大家来张效果图,点击左上角的登录就会弹出登录系统: 下面跟大家分享下代码,代码复制到HTML文件里面能直接看到效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xht

Js无刷新添加新层,拖动DIV层可互换位置的JavaScript实现

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Js无刷新添加新层</title><style>body {margin:0px;padding:0px;font-size:12px;text-align:center;}body > div {text-ali