一、问题：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应。
(1)方法1、浮动：
左侧设置左浮动，右侧设置右浮动即可，中间会自动地自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右固定中间自适应</title>
<style>
*{
margin: 0;
padding: 0;
}
.contain div{
height: 100px;
}
#div1{
float: left;
width: 300px;
background: #fff000;
}
#div3{
float: right;
width: 300px;
background: #ff0000;
}
#div2{
background: #00ffff;
}
</style>
</head>
<body>
<div class="contain">
<div id="div1">左</div>
<div id="div3">右</div>
<div id="div2">中间</div>
</div>
</body>
</html>
上面的一定注意，结构部分，顺序是左右中，否则如果你左中右的话，右浮动也上不去，因为有中块级元素在那独占一行
(2).方法2、绝对定位：
左侧设置为绝对定位， left：0px。右侧设置为绝对定位， right：0px。中间设置为绝对定位，left 和right 都为300px，即可。中间的宽度会自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.contain div{
height: 100px;
position: absolute;
}
#div1{
left: 0px;
width: 300px;
background: #fff000;
}
#div3{
right: 0px;
width: 300px;
background: #ff0000;
}
#div2{
left: 300px;
right: 300px;
background: #00ffff;
}
</style>
</head>
<body>
<div class="contain">
<div id="div1">左</div>
<div id="div3">右</div>
<div id="div2">中间</div>
</div>
</body>
</html>
（3）方法3、flexbox布局
给左中右所在的父元素设置为display: flex，设置两侧的宽度后，然后让中间的份数为1，flex = 1，即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.contain {
display: flex;
}
.contain div{
height: 100px;
}
#div1{
width: 300px;
background: #fff000;
}
#div3{
width: 300px;
background: #ff0000;
}
#div2{
flex: 1;
background: #00ffff;
}
</style>
</head>
<body>
<div class="contain">
<div id="div1">左</div>
<div id="div2">中间</div>
<div id="div3">右</div>
</div>
</body>
</html>
上面那个结构顺序就是左中右了
（4）方法4、网格布局 grid
设置容器为网格布局，宽度为100% ,设置网格为三列，并设置每列的宽度。即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网格布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.contain {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
#div1{
background: #fff000;
}
#div3{
background: #ff0000;
}
#div2{
background: #00ffff;
}
</style>
</head>
<body>
<div class="contain">
<div id="div1">左</div>
<div id="div2">中间</div>
<div id="div3">右</div>
</div>
</body>
</html>
二、四种方法的对比
a. 4种方法的优缺点，兼容性问题：实际开发中，哪个最实用？
（1）方法1 浮动
优点：兼容性好。
缺点：浮动会脱离标准文档流，因此要清除浮动。我们解决好这个问题即可。
（2）方法:2：绝对定位
优点：快捷。
缺点：导致子元素也脱离了标准文档流，可实用性差。
（3）方法3：flex 布局（CSS3中出现的）
- ####优点：解决上面两个方法的不足，flex布局比较完美。移动端基本用 flex布局。
（4）方法4：网格布局
- ####优点：CSS3中引入的布局，很好用。代码量简化了很多。
b.延伸：如果题目中去掉高度已知
问题：题目中，如果去掉高度已知，我们往中间的模块里塞很多内容，让中间的模块撑开。会发生什么变化？哪个布局就不能用了？
答案是：flex 布局可以通用，其他三个布局都不能用了。
以上代码，天下我全都用div做的，没有考虑语义化，如果你追求完美，那么可以把父容器换成article标签
315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
