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

桃扇骨 2022-08-12 06:59 119阅读 0赞

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

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

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

HTML代码：

1:

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:    }

效果：

![SouthEast][]

来源：[http://www.ido321.com/666.html][http_www.ido321.com_666.html]

[SouthEast]: /images/20220810/0efc531dfb394fad9c584e72363c912d.png
[http_www.ido321.com_666.html]: http://www.ido321.com/666.html

发表评论取消回复

表情：

评论列表（有 0 条评论，119人围观）

还没有评论，来说两句吧...

相关阅读

相关 div中如何把图片始终悬浮（固定）在页面窗口底部或顶部

页面底部： css代码： .divClass { position: fixed; bottom: 0; left: 0; ri

阳光穿透心脏的1/2处/ 2022年12月19日 13:15/ 0 赞/ 142 阅读

相关 php固定大小图片,PHP如何裁剪图片成固定大小

/\ \说明：函数功能是把一个图像裁剪为任意大小的图像，图像不变形 \ 参数说明：输入需要处理图片的文件名，生成新图片的保存文件名，生成新图片的宽，生成新图片的高 \

爱被打了一巴掌/ 2022年11月17日 14:40/ 0 赞/ 167 阅读

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

这是贴友问的一个问题，具体需求是：如何在固定大小的DIV层插入N多个图片，使其一行排列，超出层宽时出现滑动条？原以为利用overflow属性可以实现，但是测试失败。后来

桃扇骨/ 2022年08月12日 06:59/ 0 赞/ 120 阅读

相关 jquery任意不固定大小div水平垂直居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

╰+攻爆jí腚メ/ 2022年08月10日 14:56/ 0 赞/ 142 阅读

相关 CSS之固定大小的div中自动显示图片的中间部分

原图： ![图片][20170209085459454] 展示图： ![图片][20170209085508048] <!DOCTYPE html

我就是我/ 2022年07月12日 03:25/ 0 赞/ 138 阅读

相关如何把div固定在底层，flash动画置于底层。

问题描述：有时候我们需要用到背景图，或者背景动画。那么我们就需要把背景图/动画。置于页面的最底层了。 1、背景图置于底层方法一：给div添加相对应的属性

小鱼儿/ 2022年05月20日 04:50/ 0 赞/ 122 阅读

相关 css文件如何使背景图片大小适应div的大小

对背景图片设置属性：background-size：cover;可以实现背景图片适应div的大小。 background-size有3个属性： 1. auto：当使用该属

Dear 丶/ 2022年05月12日 08:30/ 0 赞/ 199 阅读

相关 div背景的图片不能跟随大小变化的问题

div背景的图片不能跟随大小变化的问题记录下自己在工作中遇到的问题：背景：要在项目首页的中加入一个背景图片，然后这次用的是DIV，在DIV中加入背景图片，然后在bo

今天药忘吃喽~/ 2022年01月23日 10:15/ 0 赞/ 220 阅读

相关 java大小固定的队列——保存最后N个元素

我们在应用中有时会用到这样一个数据结构——一个大小固定的队列，每次插入数据后最新的数据被删除，就类似一个圈，每次加入新元素后旧元素被覆盖。 1、EvictingQueue：

爱被打了一巴掌/ 2021年06月24日 16:00/ 0 赞/ 322 阅读

相关如何在HTML上插入图片

在HTML中插入图片的方法有：直接在html代码上插入、在CSS样式中插入、在JavaScript中通过给img设置src值来插入图片、innerHTML插入img属性来...

红太狼/ 2021年02月01日 17:29/ 0 赞/ 716 阅读