Home > Article > Web Front-end > 问题：如何在固定大小的DIV层插入N多个图片_html/css_WEB-ITnose
问题：如何在固定大小的DIV层插入N多个图片_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:57:241048browse
这是贴友问的一个问题，具体需求是：
如何在固定大小的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" alt="问题：如何在固定大小的DIV层插入N多个图片_html/css_WEB-ITnose" ></div>
10: <div class="div2"><img src="test2.jpg" alt="问题：如何在固定大小的DIV层插入N多个图片_html/css_WEB-ITnose" ></div>
11: <div class="div3"><img src="test3.jpg" alt="问题：如何在固定大小的DIV层插入N多个图片_html/css_WEB-ITnose" ></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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Github 上最受欢迎的一些 CSS 框架参考_html/css_WEB-ITnoseNext article：关于CSS3 :nth-child() 选择器_html/css_WEB-ITnose