首页 > 代码库 > css页面布局之左侧定宽，右侧自适应
css页面布局之左侧定宽，右侧自适应
左侧定宽，右侧自适应是一种常见的布局方式，比如好多后台和外卖点餐页面。
常用的几种方案如下：
方案1，使用flex布局:在线效果http://jsrun.net/FeYKp
<div class="main" style="width: 100%;height: 400px;"> <div class="left" style="width: 200px;height: 200px;background: red;"></div> <div class="right" style="background: blue;height: 200px;"></div> </div>
html,body{
margin:0;
padding:0;
}
.main{
display:flex;
}
.right{
flex:1;
}
方案2，左边左浮动，右边加个margin-left：在线效果http://jsrun.net/JeYKp/
html,body{
margin:0;
padding:0;
}
.left{
float: left;
}
.right{
margin-left:200px;
}
方案3，左边左浮动，右边overflow：hidden ：在线效果： http://jsrun.net/xeYKp
html,body{
margin:0;
padding:0;
}
.left{
float: left;
}
.right{
overflow: hidden;
}
方案4，左边使用绝对定位，右边使用margin-left ：在线效果：http://jsrun.net/GeYKp/
html,body{
margin:0;
padding:0;
}
.left{
position:absolute;
top:0;
left:0;
}
.right{
margin-left：200px;
}
css页面布局之左侧定宽，右侧自适应
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。