实现布局的几种方法，见代码：
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .content{ width: 100%; height: 50px; border: solid 1px; margin-top: 10px; } .content div:first-child{ background: red; height: 50px; width:50px; } .content div:last-child{ background: green; height: 50px; } </style> </head> <body> <!--浮动--> <div class="content" > <div style="float: left;"></div> <div style="margin-left: 50px;"></div> </div> <!--绝对定位--> <div class="content" > <div style="position: absolute"></div> <div style="overflow:hidden;"></div> </div> <!--flex--> <div class="content" style="display:flex;"> <div ></div> <div style="flex-grow: 1"></div> </div> <!--表格--> <table class="content" style="border-collapse: collapse;"> <tr> <td style="50px;background:red;"></td> <td style="background:green;"></td> </tr> </div> </body> </html>