左右布局方案

实现左右布局的方案

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

想要的效果

方案1：弹性布局 display:flex

      .box {
        background-color: pink;  // 方便看效果
        display: flex;
        width: 500px;
      }

      .left {
        background-color: orange;
        width: 100px;
        height: 100px;
      }

      .right {
        background-color: green;
        width: 400px;
        height: 100px;
      }

注意:代码简洁，简单；兼容性可能差一点

方案2：将子盒子变为行内块 display:inline-block

      .box {
        background-color: pink;
        font-size: 0;
        display: inline-block;
      }

      .left {
        background-color: orange;
        width: 100px;
        height: 100px;
        display: inline-block;
        vertical-align: top;
      }

      .right {
        background-color: green;
        width: 400px;
        height: 100px;
        display: inline-block;
        vertical-align: top;
      }

注意：inline-block盒子有个默认的间隙，如果将父盒子的font-size设置为0，则可取消

行内块可能发生盒子对不齐，盒子掉下来现象，所以我们最好给它加上vertical-align:top

方案3：浮动float

     .box {
        background-color: pink;
        width: 500px;
        /* display: inline-block; */
        overflow: hidden;
      }

      .left {
        background-color: orange;
        width: 100px;
        height: 100px;
        float: left;
      }

      .right {
        background-color: green;
        width: 400px;
        height: 100px;
        float: right;
      }

reen;
width: 400px;
height: 100px;
float: right;
}

注意：注意清除浮动，overflow:hidden;不然可能盒子布局会出现问题