实现左边定宽右边自适应效果,你能想到几种呢？

Q 问:

现在有一个容器，其中放有两个div，HTML和CSS代码如下所示。
我们需要这两个div并排在一行，并使左边的div宽度确定， 右边的div宽度能够自适应剩余的容器宽度 。
请写出你能想到的所有可能。

@-v-@

<div class="cont">
  <div class="left-item">
  </div>
  <div class="right-item">
  </div>
</div>

html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #ffffff;
}
.cont {
  width: 80%;
  height: 40%;
  margin: 50px auto 0;
  background-color: #f4f4f4;
}
.left-item{
  width: 10em;
  height: 100%;
  background-color: #0099ff;
}
.right-item{
  height: 100%;
  background-color: #ff6666;
}

A 答:

第一种 all inline-block + calc()

.cont {
  font-size: 0;
}
.left-item {
  font-size: 16px;
  display: inline-block;
}
.right-item {
  font-size: 16px;
  display: inline-block;
  width: calc(100% - 10em);
}

第二种 all float + calc()

.cont {
  zoom: 1;
}
.cont::after {
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}
.left-item {
  float: left;
}
.right-item {
  float: right;
  width: calc(100% - 10em);
}

第三种 left float

.cont {
  zoom: 1;
}
.cont::after {
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}
.left-item {
  float: left;
}
.right-item {
  width: 100%;
  padding-left: 10em;
  box-sizing: border-box;
}

第四种 left absolute

.cont {
  position: relative;
}
.left-item {
  position: absolute;
}
.right-item {
  width: 100%;
  padding-left: 10em;
  box-sizing: border-box;
}

第五种 all absolute

.cont {
  position: relative;
}
.left-item {
  position: absolute;
}
.right-item {
  position: absolute;
  left: 10em;
  right: 0;
}

第六种 right flex

.cont {
  display: -webkit-flex;
  display: -ms-flex;
  -webkit-display: flex;
  -ms-display: flex;
  display: flex;
}
.left-item {}
.right-item {
  flex: 1;
}

第七种 table

.cont {
  display: table;
}
.left-item {
  display: table-cell;
}
.right-item {
  display: table-cell;
}

第八种 grid

.cont {
  display: grid;
  grid-template-columns: 10em auto;
}
.left-item {
}
.right-item {
}

综上:

针对布局问题，可以使用 flex / table / grid 可以搞定。
如果要考虑兼容性问题，或当它们无法实现时，可以考虑 float / absolute 进行布局。
如果仍然无法搞定，可以尝试使用 float / absolute 加上 calc() 进行布局。

使用 float / absolute 可以满足需要，且它们不会出现兼容性问题，是比较合适的解决方案。