css面试题：请用尽可能多的方法实现css三栏布局，高度一致，左右宽度一定，中间宽度自适应。
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>css三栏布局</title>    <style>      html * {        margin: 0;        padding: 0;      }      section {        height: 100px;        margin-bottom: 20px;      }      section div {        height: 100px;      }      .left {        background-color: aqua;      }      .mid {        background-color: burlywood;      }      .right {        background-color: coral;      }    </style>  </head>  <body>    <p>题目：假设高度已知，请写出三栏布局，其中左栏右栏各为100，中间自适应。</p>    <!-- 浮动布局 -->    <section class="float">      <style>        .float-left {          float: left;          width: 100px;        }        .float-right {          float: right;          width: 100px;        }      </style>      <article>        <div class="left float-left"></div>        <div class="right float-right"></div>        <div class="mid float-mid">我是用的浮动</div>      </article>    </section>    <!-- flex布局 -->    <section class="flex">      <style>        .flex article {          display: flex;        }        .flex-left {          width: 100px;        }        .flex-right {          width: 100px;        }        .flex-mid {          flex: 1;        }      </style>      <article>        <div class="left flex-left"></div>        <div class="mid flex-mid">我是用的flexbox</div>        <div class="right flex-right"></div>      </article>    </section>    <!-- 绝对定位 -->    <section class="position">      <style>        .position article{          position: relative;        }        .position-left {          position: absolute;          left: 0;          width: 100px;        }        .position-right {          position: absolute;          right: 0;          width: 100px;        }        .position-mid {          position: absolute;          left: 100px;          right: 100px;        }      </style>      <article>        <div class="left position-left"></div>        <div class="right position-right"></div>        <div class="mid position-mid">          我是用的绝对定位        </div>      </article>    </section>    <!-- table布局 -->    <section class="table">      <style>        .table article {          display: table;          width: 100%;        }        .table-left {          display: table-cell;          width: 100px;        }        .table-right {          display: table-cell;          width: 100px;        }        .table-mid {          display: table-cell;        }      </style>      <article>        <div class="left table-left"></div>        <div class="mid table-mid">我是用的表格布局</div>        <div class="right table-right"></div>      </article>    </section>    <!-- 网格布局 -->    <section class="grid">      <style>        .grid article {          display: grid;          width: 100%;          grid-template-rows: 100px;          grid-template-columns: 100px auto 100px;        }      </style>      <article>        <div class="left grid-left"></div>        <div class="mid grid-mid">我是用的网格布局</div>        <div class="right grid-right"></div>      </article>    </section>    后文思考：    <ul>      <li>1.各自优缺点</li>      <li>2.去掉固定高度后有什么影响？</li>      <li>3.各自兼容性</li>    </ul>  </body></html>

效果预览：