Day160:动手实现一个左右固定100px，中间自适应的三列布局？(至少三种)

[Genzhen]

每日一题会在下午四点在交流群集中讨论，五点小程序中更新答案
二维码加载失败可点击 小程序二维码

扫描下方二维码，收藏关注，及时获取答案以及详细解析，同时可解锁800+道前端面试题。

[Clect]

<div id="father">
      <div id="son"></div>
</div>

1、

用calc
#father {
width: 600px;
height: 200px;
background-color: black;
}

#son {
width: calc(100% - 200px);
height: 100%;
background-color: green;
margin: 0 100px;
}

2、

用flex
#father {
width: 600px;
height: 200px;
background-color: black;
display: flex;
}

#son {
flex: 1;
height: 100%;
margin: 0 100px;
background-color: green;
}

3、

用padding
#father {
width: 400px;
height: 200px;
background-color: black;
padding: 0 100px;
}

#son {
width: 100%;
height: 100%;
background-color: green;
}

[lightzhu]

1.float
2.position:absolute
3.flex
4.display:table
5.display:grid

<style> .table { display: table; width: 100%; }

  .table>div {
    display: table-cell;
    width: 100px;
    background: pink;
  }

  .table .center {
    display: table-cell;
  }
</style>
<div class='left'></div>
<article class='center'>
  shjdkadfkjafdkasflkslkfskld
  table布局
</article>
<div class='right'></div>

<style> .grid { display: grid; grid-template-columns: 100px auto 100px; }

  .grid>div {
    background: pink;
  }
</style>
<div class='left'></div>
<article class='center'>
  shjdkadfkjafdkasflkslkfskld
</article>
<div class='right'></div>

[GuoLizhi]

整体的html

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

方法1： flex

.container {
  display: flex;
  height: 100px;
}
.container * {
  height: 100px;
}
.left,
.right {
  flex-basis: 100px;
  background-color: aquamarine;
}
.center {
  flex-grow: 1;
  background: red;
}

方法2: position

.container {
  height: 100px;
  position: relative;
}
.container * {
  height: 100px;
  position: absolute;
  top: 0;
}
.left,
.right {
  background-color: aquamarine;
  width: 100px;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.center {
  background: red;
  left: 100px;
  right: 100px;
}

方法3：float+margin

如果用浮动的话，html布局要稍微调整一下

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

css如下

.container {
  height: 100px;
  overflow: hidden;
}
.container * {
  height: 100px;
}
.left,
.right {
  background-color: aquamarine;
  width: 100px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  background: red;
  margin: 0 100px;
}

方法4：grid

.container {
  height: 100px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 100px auto 100px;
}
.container * {
  height: 100px;
}
.left,
.right {
  background-color: aquamarine;
  width: 100px;
}
.center {
  background: red;
}

但grid布局兼容性不太友好，参考caniuse