<!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盒模型来实现两栏布局（左侧固定宽度，右侧自适应宽度）
原文：http://www.cnblogs.com/xiaodabao/p/5925511.html