两列布局，左侧固定宽度右侧自适应

两列布局，左侧固定宽度右侧自适应

HTML

    

      

        左边固定宽度，高度不固定 
 


高度有可能会很小，也可能很大。
      
      

        这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。

        基本的样式是，两个div相距20px, 左侧div宽 120px
      
    

方案一: 双 float + calc 计算右侧宽度

      /* 必须双浮动的原因是，由于非浮动元素会排在浮动元素的下方，所以如果.right不设置浮动的化，我们减掉的宽度就会被隐藏在.left的下面 */
      /* 设置了浮动的元素如果一行排不下也会被挤到下一行 */
      .wrapper {
        overflow: hidden;
      }
      .left {
        background-color: cadetblue;
        float: left;
        width: 200px;
      }
      .right {
        background-color: blueviolet;
        float: left;
        width: calc(100% - 200px);
      }

方案二：左侧 float，右侧 margin-left

.wrapper {
        overflow: hidden;
      }

.left {
        background-color: cadetblue;
        float: left;
        width: 200px;
      }
      .right {
        background-color: blueviolet;
        margin-left: 200pxs;
      }

方案三：左侧绝对定位，右侧 margin-left

.left {
        background-color: cadetblue;
        position: absolute;
        width: 200px;
      }
      .right {
        background-color: blueviolet;
        margin-left: 200px;
      }

缺点就是父元素无法包含决定定位元素的高度

方案四：左侧 float+右侧 BFC

.wrapper {
        overflow: hidden;
      }
.left {
        background-color: cadetblue;
        float: left;
        width: 200px;
      }
      .right {
        background-color: blueviolet;
        overflow: auto;
      }

优点就是右侧不需要知道左侧盒子的宽度

左侧浮动，但是右侧盒子通过 overflow: auto;形成了 BFC，因此右侧盒子不会与浮动的元素重叠。

方案五： flex 布局

.wrapper {
        display:flex
      }
      .left {
        background-color: cadetblue;
        width: 200px;
      }
      .right {
        background-color: blueviolet;
        flex:1
      }

方案六： Grid 布局

.wrapper {
        display:grid;
        grid-template-columns: 200px 1fr;
      }
      .left {
        background-color: cadetblue;
      }
      .right {
        background-color: blueviolet;
      }