css 实现多张图片响应式水平排列自适应效果

时间：2016-04-28 16:44:34 收藏：0 阅读：868

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             
 8             
 9             .test{
10                 float: left;
11                 width: 25%;
12                 box-sizing: border-box;
13                 padding: 10px;
14                 min-width: 150px;
15             }
16             
17             .container{
18                 width: 100%;
19             }
20             
21             @media (max-width:615px ) {
22                 .test{
23                     float: left;
24                     width: 33%;
25                     box-sizing: border-box;
26                     padding: 10px;
27                     min-width: 150px;
28                 }
29             }
30             
31             @media (max-width:465px ) {
32                 .test{
33                     float: left;
34                     width: 50%;
35                     box-sizing: border-box;
36                     padding: 10px;
37                     min-width: 150px;
38                 }
39             }
40             
41             @media (max-width:315px ) {
42                 .test{
43                     float: left;
44                     width: 100%;
45                     box-sizing: border-box;
46                     padding: 10px;
47                     
48                 }
49             }
50             
51         </style>
52     </head>
53     <body>
54         
55         <div class="container">
56             <div class="test" >
57                 <img src="img/7e18f35b57e8416a0ba088822786d1bb.jpg" style="max-width: 100%;"/>
58             </div>
59             <div class="test" >
60                 <img src="img/7e18f35b57e8416a0ba088822786d1bb.jpg" style="max-width: 100%;"/>    
61             </div>
62             <div class="test" >
63                 <img src="img/7e18f35b57e8416a0ba088822786d1bb.jpg" style="max-width: 100%;"/>    
64             </div>
65             <div class="test" >
66                 <img src="img/7e18f35b57e8416a0ba088822786d1bb.jpg" style="max-width: 100%;"/>    
67             </div>
68         </div>
69         
70     </body>
71 </html>

效果图如下：

技术分享

1.使用响应式图片：为图片添加 max-width:100%

2.设置图片最小宽度，当屏幕宽度不够时，图片会排成2行甚至多行

3.使用媒体查询处理当一张图片挤到下一行时，留下的空白位置

原文：http://www.cnblogs.com/zouqin/p/5443206.html