Question: How to insert N multiple pictures in a fixed-size DIV layer_html/css

Question: How to insert N multiple pictures in a fixed-size DIV layer_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:57:24

Original

1093 people have browsed it

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多个图片，使其一行排列，超出层宽时出现滑动条？ -->

Copy after login

   2: <!DOCTYPE html>

Copy after login

   3: <html>

Copy after login

   4: <head>

Copy after login

   5: <meta http-equiv="content-type" content="text/html;charset=utf-8">

Copy after login

   6: </head>

Copy after login

   7: <body>

Copy after login

   8:    <div class="div">

Copy after login

   9:         <div class="div1"><img src="test1.jpg"></div>

Copy after login

  10:         <div class="div2"><img src="test2.jpg"></div>

Copy after login

  11:         <div class="div3"><img src="test3.jpg"></div>

Copy after login

  12:    </div>

Copy after login

  13: </body>

Copy after login

  14: </html>

Copy after login

css control style:

   1: .div{

Copy after login

   2:        width:400px;

Copy after login

   3:        height:200px;

Copy after login

   4:        overflow-y:hidden;  /*只出现水平滚动条*/

Copy after login

   5:        position: absolute;

Copy after login

   6:    }

Copy after login

   7:    .div1{

Copy after login

   8:        position:absolute;

Copy after login

   9:        z-index:1;

Copy after login

  10:    }

Copy after login

  11:    .div2{

Copy after login

  12:        position:absolute;

Copy after login

  13:        z-index:5;

Copy after login

  14:        left:200px;

Copy after login

  15:        top:0px

Copy after login

  16:    }

Copy after login

  17:    .div3{

Copy after login

  18:        position:absolute;

Copy after login

  19:        z-index:10;

Copy after login

  20:        left:400px;

Copy after login

  21:        top:0px

Copy after login

  22:    }

Copy after login

Effect:

Source: http://www.ido321.com/666.html