【CSS】左侧宽度固定，右侧宽度自适应布局

html

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

float + margin

.box {
  height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: lightblue;
}

.box-right {
  margin-left: 200px;
  background-color: lightpink;
}

float + calc

.box {
  height: 300px;
}
.box > div {
  height: 100%;
}
.box .box-left {
  width: 200px;
  float: left;
  background: lightblue;
}
.box .box-right {
  width: calc(100% - 200px);
  float: right;
  background: lightpink;
}

flex

.box {
  height: 200px;
  display: flex;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  background-color: lightblue;
}

.box-right {
  flex: 1; // 设置flex-grow属性为1，默认为0
  overflow: hidden;
  background-color: lightpink;
}

position布局

.box-left {
  position: absolute;
  width: 100px;
  height: 100%;
  background: lightblue;
}
.box-right {
  position: absolute;
  top: 0;
  left: 100px;
  right: 0;
  bottom: 0;
  height: 100%;
  background-color: lightpink;
}
posted @ 2021-06-30 14:52  razzh  阅读(69)  评论(0)    收藏  举报