Home > Article > Web Front-end > Question: How to insert N multiple pictures in a fixed-size DIV layer_html/css_WEB-ITnose
Question: How to insert N multiple pictures in a fixed-size DIV layer_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:57:241080browse
This is a question asked by a poster. The specific requirement is:
How to insert N multiple pictures in a fixed-size DIV layer so that they can be arranged in one row when the layer width is exceeded. A slider appears?
I thought it could be achieved using the overflow attribute, but the test failed. Later, the effect was achieved using div cascading.
HTML code:
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 control style:
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: }
Effect:
Source: 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