品牌浮动--图片格式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <style> 6 .flex-container { 7 display: flex; 8 flex-wrap: wrap; 9 background-color: DodgerBlue; 10 } 11 12 .flex-container > div { 13 background-color: #f1f1f1; 14 background-image: url('/i/photo/flower-5.jpg'); 15 background-repeat: no-repeat; 16 background-size: contain; 17 width: 100px; 18 height:100px; 19 margin: 10px; 20 text-align: center; 21 line-height:100px; 22 font-size: 20px; 23 border: 1px solid red; 24 } 25 </style> 26 </head> 27 <body> 28 29 <div></div> 30 <div></div> 31 32 <div class="flex-container"> 33 <div></div> 34 <div></div> 35 <div></div> 36 <div></div> 37 <div></div> 38 <div></div> 39 <div></div> 40 <div></div> 41 <div></div> 42 <div></div> 43 <div></div> 44 <div></div> 45 <div></div> 46 <div></div> 47 </div> 48 </body> 49 </html>
效果图
