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

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

WBOY

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

asal

1093 orang telah melayarinya

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

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

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

HTML代码：

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

Salin selepas log masuk

   2: <!DOCTYPE html>

Salin selepas log masuk

   3: <html>

Salin selepas log masuk

   4: <head>

Salin selepas log masuk

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

Salin selepas log masuk

   6: </head>

Salin selepas log masuk

   7: <body>

Salin selepas log masuk

   8:    <div class="div">

Salin selepas log masuk

   9:         <div class="div1"><img  src="test1.jpg" alt="问题：如何在固定大小的DIV层插入N多个图片_html/css_WEB-ITnose" ></div>

Salin selepas log masuk

  10:         <div class="div2"><img  src="test2.jpg" alt="问题：如何在固定大小的DIV层插入N多个图片_html/css_WEB-ITnose" ></div>

Salin selepas log masuk

  11:         <div class="div3"><img  src="test3.jpg" alt="问题：如何在固定大小的DIV层插入N多个图片_html/css_WEB-ITnose" ></div>

Salin selepas log masuk

  12:    </div>

Salin selepas log masuk

  13: </body>

Salin selepas log masuk

  14: </html>

Salin selepas log masuk

css控制样式：

   1: .div{

Salin selepas log masuk

   2:        width:400px;

Salin selepas log masuk

   3:        height:200px;

Salin selepas log masuk

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

Salin selepas log masuk

   5:        position: absolute;

Salin selepas log masuk

   6:    }

Salin selepas log masuk

   7:    .div1{

Salin selepas log masuk

   8:        position:absolute;

Salin selepas log masuk

   9:        z-index:1;

Salin selepas log masuk

  10:    }

Salin selepas log masuk

  11:    .div2{

Salin selepas log masuk

  12:        position:absolute;

Salin selepas log masuk

  13:        z-index:5;

Salin selepas log masuk

  14:        left:200px;

Salin selepas log masuk

  15:        top:0px

Salin selepas log masuk

  16:    }

Salin selepas log masuk

  17:    .div3{

Salin selepas log masuk

  18:        position:absolute;

Salin selepas log masuk

  19:        z-index:10;

Salin selepas log masuk

  20:        left:400px;

Salin selepas log masuk

  21:        top:0px

Salin selepas log masuk

  22:    }

Salin selepas log masuk

效果：

来源：http://www.ido321.com/666.html