码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-06-30 17:12:00      阅读:208      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!