共计 2096 个字符，预计需要花费 6 分钟才能阅读完成。
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>
效果预览：
正文完
