代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; box-sizing: border-box; } p{ font-size: 50px; font-weight: 700; } .float{ overflow: hidden; /* width: 1600px; */ border: 5px black solid; } .float div{ float: left; width: 200px; height: 200px; border: 3px yellow solid; background-color: green; } .flex{ display: flex; border: 5px black solid; justify-content:space-between; } .flex div{ width: 200px; height: 200px; border: 3px yellow solid; background-color: green; } </style> </head> <body> <p>float</p> <div class="float"> <div></div> <div style="margin-left:650px;"></div> <div style="float:right"></div> </div> <p>flex</p> <div class="flex"> <div></div> <div></div> <div></div> </div> </body> </html>
效果图:
移动web-案例-float和flex的不同
最新推荐文章于 2024-10-12 14:14:19 发布