<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 400px;height: 400px; border: 1px solid red; display: flex;/*设置为伸缩的父元素*/ } .dv1{ width: 100px;height: 100px;/*宽度无效*/ background: red; flex: 2; } .dv2{ width: 100px;height: 100px;/*宽度无效*/ background: blue; flex: 2; } .dv3{ width: 100px;height: 100px;/*宽度无效*/ background: yellow; flex: 1; } </style> </head> <body> <div class="box"> <div class="dv1"></div> <div class="dv2"></div> <div class="dv3"></div> </div> </body> </html>
主要是用:
display:flex;
flex:1;/*宽度无效*/