[css]【转】CSS创建两栏布局（左侧宽度固定，右侧宽度自适应）的几种方式

方式1：使用浮动 + margin
方式2：使用绝对定位 + margin
方式3：使用浮动 + BFC
方式4：使用flex布局
方式5：使用table
方式6：使用display设置为table布局


方式1：使用浮动 + margin

适用于已知左侧元素宽度的情况。


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


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


.right {
  height: 100px;
  background-color: red;
  margin-left: 200px;
}



方式2：使用绝对定位 + margin
适用于已知左侧元素宽度的情况。


.left {
  width: 200px;
  height: 100px;
  background-color: green;
  position: absolute;  /* 只改变了这一行代码 */
}


.right {
  height: 100px;
  background-color: red;
  margin-left: 200px;
}



方式3：使用浮动 + BFC
这种方式在不知道左侧元素宽度的情况下，也可以用。


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


    .right {
      height: 100px;
      background-color: red;
      /* 只改变了这一行代码 */
      overflow: hidden; /* 开启BFC */
    }



不知道BFC，可以点些链接：CSS中的BFC是什么？怎么用？



方式4：使用flex布局
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>


.container {
  display: flex;
}


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


.right {
  flex: 1;
  background-color: red;
}
给父元素设置为flex布局，里边的两个子元素就会在同一行显示。左侧的子元素的宽度固定，右侧的子元素设置为flex:1。


这里解释一下flex:1的意思。flex 属性其实是 flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。



方式5：使用table
方式6：使用display设置为table布局


方式5与方式6不建议使用，此处不写详细实现方式，想看可以查看下面的原文地址


转自：
https://blog.csdn.net/weixin_43974265/article/details/115417790