关于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布局