关于css:自适应的两栏布局

办法一：float布局

html局部

<div class="main">
  <div class="left"></div> 
  <div class="right"></div>
</div>

CSS局部

.main{
  position: relative;
  width: 100%;
  height: 100%;
}

 .right{
  width: 100%;
  height: 100%;
  background: #4caf50;
}

.left{
  width: 200px;
  height: 100%;
  background: #4a1362;
  float: left;
}

办法二：相对定位

1、右边相对定位，左边设置padding-left

html局部

   <div class="main">
     <div class="right"></div> 
     <div class="left"></div>
   </div>

css局部

.main{
  position: relative;
  width: 100%;
  height: 100%;
}
.right{
  position: relative;
  width: 100%;
  height: 100%;
  background: #4caf50;
}
.left{
  position: absolute;
  top:0;
  width: 200px;
  height: 100%;
  background: #4a1362;
  }

2，左边相对定位，左边设置padding

html局部同上

css局部

.main{
  position: relative;
  width: 100%;
  height: 100%;
}
.right{
  position: absolute;
  padding-left: 200px;
  top:0;
  width: 100%;
  height: 100%;
  background: #4caf50;
}
.left{
  position: relative;
  width: 200px;
  height: 100%;
  background: #4a1362;
}

办法三：flex布局

html局部

<div class="main">
  <div class="left"></div> 
  <div class="right"></div>
</div>

css局部

.main{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}
.right{
  width: 100%;
  height: 100%;
  background: #4caf50;
}
.left{
  width: 200px;
  height: 100%;
  flex-shrink: 0;
  background: #4a1362;
}

flex-shrink属性定义了我的项目的放大比例，默认为1，即如果空间有余，该我的项目将放大。改为0则不会因为空间有余而放大，详见 flex布局