首页 > 代码库 > 使用css3的flex盒模型来实现两栏布局（左侧固定宽度，右侧自适应宽度）
使用css3的flex盒模型来实现两栏布局（左侧固定宽度，右侧自适应宽度）
<!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盒模型来实现两栏布局（左侧固定宽度，右侧自适应宽度）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。