css 实现多张图片响应式水平排列自适应效果
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.使用媒体查询处理当一张图片挤到下一行时，留下的空白位置
