两列布局（三种方法）

• float

  <div id="a1">a</div>
  <div id="b1">b</div>
  
  #a1{
      float:left;
      width:40px;
      height:40px;
     background: red;
  }
  #b1{
      height:40px;
      margin-left:40px;  //这里把左边a1位置留出来。不设置宽度，随屏幕变化
      background:green;
  }

   

• 相对定位

  <div id="parent2">
    <div id="a2">a</div>
    <div id="b2">b</div>
    <div id="c2">c</div>
  </div>
  
  #parent2{
     position:relative;  //这里要给父元素设一个position。以便a2设置position:absolute.
  }
  #a2{
     position:absolute;
     width:40px;
     height:40px;
     background:green;
  }
  #b2{
     height:40px;
     margin-left:40px;//给左边留出位置来。
     background:red;
  }

• flex

  <div id="parent3">
    <div id="a3">a</div>
    <div id="b3">b</div>
  </div>
  
  #parent3{
     display:flex;//设置为flex弹性框。
  }
  #a3{
     width:40px;
     height:40px;
     background:red;
  }
  #b3{
    flex:1;
    height:40px;
    background:red;
  }

  这里多说一下flex：将容器设为display：flex；后每个子元素都会变成flex-item，可以伸缩；
  flex-flow：row 是横向 。需要设置width
  flex-flow：column是纵向。 设置height；
   
  .container{display:flex;flex-flow: row  wrap;}这里的wrap可以让子元素在一列无法显示完的时候自动移到下一列。

转载于:https://www.cnblogs.com/liurenxingyu/p/4851043.html