<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ height:500px; border:1px solid #222; display:flex;/*設為伸縮容器*/ flex-flow:row;/*伸縮項目單行排列*/ } .stable{ width:200px;/*固定寬度*/ border:1px solid #ccc; margin:20px; } .change{ flex:1;/*這里設置為占比1，填充滿剩余空間*/ border:1px solid #ff4400; margin:20px; } </style> </head> <body> <div class="parent"> <div class="stable">stable 固定寬度200px</div> <div class="change">changeable 可變寬度</div> </div> </body> </html>
附：傳統模式（利用float浮動實現）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .parent{ height: 500px; border:1px solid #222; } .stable{ float: left; height: 460px; width: 200px; border:1px solid #ccc; margin:20px; } .change{ height: 460px; border:1px solid #ff4400; margin:20px 20px 20px 260px; } </style> </head> <body> <div class="parent"> <div class="stable">stable 固定寬度200px</div> <div class="change">changeable 可變寬度</div> </div> </body> </html>