css页面布局之左侧定宽，右侧自适应

2021-07-07 21:04

阅读：731

标签：html position strong abs add lan oat href hidden

左侧定宽，右侧自适应是一种常见的布局方式，比如好多后台和外卖点餐页面。
常用的几种方案如下：
方案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页面布局之左侧定宽，右侧自适应

标签：html position strong abs add lan oat href hidden

原文地址：http://www.cnblogs.com/chenjinxinlove/p/7099227.html

上一篇：Web开发问题记录

下一篇：jquery datatable显示隐藏子表

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：css页面布局之左侧定宽，右侧自适应
文章链接：http://soscw.com/index.php/essay/102204.html

亲，登录后才可以留言！

css页面布局之左侧定宽，右侧自适应

评论

热门文章

推荐文章

最新文章

置顶文章