假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应.

1. 浮动、绝对定位、flexbox、表格、网格布局.

<style media="screen">
    .layout div{min-height:300px;}
    .layout .float{float:left;width:300px;background:red;}
    .layout .right{float:right;width:300px;background:blue;}
    .layout .center{background:yellow;}
</style>
<section class="layout">
    <div class="float"></div>
    <div class="right"></div>
    <div class="center"></div>
</section>

缺点: 浮动是脱离文档流的,需要清除浮动. 优点: 兼容性好.

<style media="screen">
    .layout>div{position:absolute;min-height:300px;}
    .layout .float{left:0;width:300px;background:red;}
    .layout .right{right:0;width:300px;background:blue;}
    .layout .center{left:300px;right:300px;background:yellow;}    # 这里是自适应的关键
</style>
<section class="layout">
    <div class="float"></div>
    <div class="right"></div>
    <div class="center"></div>
</section>

缺点: 已经脱离文档流了,表示下面所有的子元素全部需要脱离文档流.可使用性比较差. 优点: 快捷

<style media="screen">
    .layout{display:flex;}
    .layout>div{min-height:300px;}
    .layout .float{width:300px;background:red;}
    .layout .right{width:300px;background:blue;}
    .layout .center{flex:1;background:yellow;}
</style>
<section class="layout">
    <div class="float"></div>
    <div class="center"></div>    # 这里一定要在中间,不能跟上面一样写法
    <div class="right"></div>
</section>

优点: 解决上面两个不足,移动端都比较倾向.

<style media="screen">
    .layout{width:100%;display:table;min-height:300px;}
    .layout>div{display:table-cell;}
    .layout .float{width:300px;background:red;}
    .layout .right{width:300px;background:blue;}
    .layout .center{background:yellow;}
</style>
<section class="layout">
    <div class="float"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>

优点: 表格布局的兼容性非常好 缺点: 当三个单元格有一个超出高度,同时两个都要超过高度.

<style media="screen">
    .layout{width:100%;display:grid;grid-template-rows: 300px;grid-template-columns: 300px auto 300px;}
    .layout .float{background:red;}
    .layout .right{background:blue;}
    .layout .center{background:yellow;}
</style>
<section class="layout">
    <div class="float"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>