html----float && inline-block
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .a, .b, .c { box-sizing: border-box; border: 1px solid; } .wrap { width: 250px; } .a { width: 100px; height: 100px; float: left; background: pink; } .b { width: 100px; height: 50px; float: left; background: orange; } .c { width: 100px; height: 100px; display: inline-block; /* float: left; */ background: green; } </style> </head> <body> <div class="wrap"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </div> </body> </html>