<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title> <style> *{ margin: 0; padding: 0; } .outer{ width: 940px; height: 440px; padding: 10px; border: 2px solid #000; margin: 10px auto; } .outer div{ float: left; } .outer .box1{ width: 300px; height: 260px; background: pink; } .outer .box2{ width: 240px; height: 260px; background: cyan; } .outer .s_box{ width: 200px; height: 130px; } .outer .box3{ background: yellowgreen; } .outer .box4{ background: greenyellow; } .outer .box7{ width: 300px; height: 180px; background: blueviolet; } .outer .s_box2{ width: 160px; height: 180px; } .outer .box5{ background: purple; } .outer .box6{ background: palegreen; } </style> </head> <body> <div class="outer"> <div class="box1"></div> <div class="box2"></div> <div class="s_box box3"></div> <div class="s_box box4"></div> <div class="s_box box4"></div> <div class="s_box box3"></div> <div class="box7"></div> <div class="s_box2 box5"></div> <div class="s_box2 box6"></div> <div class="s_box2 box5"></div> <div class="s_box2 box6"></div> </div> </body> </html>
原文：https://www.cnblogs.com/hapuluosi/p/14628705.html