1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta charset="utf-8" /> 7 <meta name="keywords" content="" /> 8 <meta name="description" content="" /> 9 <title></title> 10 <style type="text/css"> 11 * { margin: 0; padding: 0; border: 0; } 12 .ReH { width: 100% !important; padding: 0 !important; border: none !important; height: 0px !important; overflow: hidden !important; clear: both !important; margin-top: -1px !important; } 13 .Con, .Con_cen, .Con_list { margin: 0 auto; } 14 .Con { width: 1200px; min-height: 120px; border: 1px solid #ff0000; } 15 .Con_cen { width: 800px; min-height: 120px; border: 1px solid #ff6a00; } 16 .Con_list { width: 750px; min-height: 120px; border: 1px solid #000000; } 17 .Con_list li { list-style: none; width: 170px; height: 200px; float: left; margin-right: 20px; margin-bottom: 15px; border: 1px solid #0094ff; } 18 .Con_list li:nth-child(4n) { margin-right: 0; } 19 .Con_list li.ReH { float: none !important; margin: 0 !important;/*清除特殊元素的干扰样式*/ } 20 </style> 21 </head> 22 <body> 23 <div class="Con"> 24 <div class="Con_cen"> 25 <ul class="Con_list"> 26 <li>1111</li> 27 <li>1111</li> 28 <li>1111</li> 29 <li>1111</li> 30 <li>1111</li> 31 <li>1111</li> 32 <li>1111</li> 33 <li>1111</li> 34 <li>1111</li> 35 <li>1111</li> 36 <li>1111</li> 37 <li>1111</li> 38 <li>1111</li> 39 <li class="ReH"></li> 40 </ul> 41 <div class="ReH"></div> 42 </div> 43 <div class="ReH"></div> 44 </div> 45 </body> 46 </html>