css页面布局之左侧定宽，右侧自适应
2021-07-07 21:04
标签：html position strong abs add lan oat href hidden 左侧定宽，右侧自适应是一种常见的布局方式，比如好多后台和外卖点餐页面。 方案2，左边左浮动，右边加个margin-left：在线效果http://jsrun.net/JeYKp/ 方案3，左边左浮动，右边overflow：hidden ：在线效果： http://jsrun.net/xeYKp 方案4，左边使用绝对定位，右边使用margin-left ：在线效果：http://jsrun.net/GeYKp/ css页面布局之左侧定宽，右侧自适应 标签：html position strong abs add lan oat href hidden 原文地址：http://www.cnblogs.com/chenjinxinlove/p/7099227.html
常用的几种方案如下：
方案1，使用flex布局:在线效果http://jsrun.net/FeYKpdiv 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;
}
html,body{
margin:0;
padding:0;
}
.left{
float: left;
}
.right{
margin-left:200px;
}
html,body{
margin:0;
padding:0;
}
.left{
float: left;
}
.right{
overflow: hidden;
}
html,body{
margin:0;
padding:0;
}
.left{
position:absolute;
top:0;
left:0;
}
.right{
margin-left：200px;
}
上一篇：Web开发问题记录