css实现两栏布局

1.一般方法来是实现两栏布局可以将左边div左浮动，使用margin-left移动右边div，为左边div留出空位
css内部样式为如下

<style>
  .parent{
    height: 500px;
    border:blue; 
  }
  .left{
    float: left;
    height: 460px;
    width: 200px;
    border:yellow; 
    margin:20px; 
  }
  .right{
    height: 460px;
    border:green; 
    margin:20px 20px 20px 260px; 
  }
</style>

div属性

<div class="parent">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

2.flex模型
左边div固定宽度，右边div自适应宽度

<style> 
.parent{
  height:500px; 
  border:blue; 
  display:flex;
  flex-flow:row;
} 
.left{ 
  width:200px;
  border:yellow; 
  margin:20px; 
} 
.right{ 
  flex:1;
  border:green; 
  margin:20px; 
} 
</style> 

<div class="parent"> 
    <div class="left">左边</div> 
    <div class="right">右边</div> 
  </div> 

3.absolute绝对定位
通过absolute让左边元素浮动，不占用父元素空间

.parent{
    position:relative;
    min-height:150px;
}
.left{
    position:absolute;
}
.right{
    margin-left:170px;
}

<div class="parent">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>