標籤：
<!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>
使用css3的flex盒模型來實現兩欄布局（左側固定寬度，右側自適應寬度）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
