题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应
总体样式设置如下：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三栏布局</title>
<style media="screen">
html *{
padding: 0;
margin: 0;
}
.layout{
margin-top: 20px;
}
.layout article div{
min-height: 120px;
}
</style>
</head>1.利用浮动解决三栏布局问题
1.1>给左右盒子分别设置向左、向右浮动，设置宽度
1.2>中间盒子自适应
<section class="layout float">
<style>
.float .left{
float: left;
width: 300px;
background: red;
}
.float .right{
float: right;
width: 300px;
background: blue;
}
.float .center{
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>这是浮动解决布局方案</h2>
1.三栏布局中间部分
2.三栏布局中间部分
3.三栏布局中间部分
</div>
</article>
</section>2.利用定位解决三栏布局问题
2.1>给父盒子设置相对定位，设置左右padding值分别等于左右盒子宽度
2.2>给左右盒子设置绝对定位，设置宽度，分别左右定位，top值为0
2.3>中间盒子自适应，中间盒子不设置绝对定位
注：也可不给父盒子设置padding值，给中间盒子设置定位，左右分别等于左右盒子宽度
<section class="layout position">
<!-- 设padding值的方法 -->
<!-- <style>
.layout.position .left-center-right{
padding: 0 300px;
position: relative;
}
.layout.position .left-center-right .left,.layout.position .right{
position: absolute;
top: 0;
}
.layout.position .left{
left: 0;
width: 300px;
background: red;
}
.layout.position .center{
background: yellow;
}
.layout.position .right{
right: 0;
width: 300px;
background: blue;
}
</style> -->
<!-- 设中间盒子定位的方法 -->
<style>
.layout.position .left-center-right div{
position: absolute;
}
.layout.position .left{
left: 0;
width: 300px;
background: red;
}
.layout.position .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.position .right{
right: 0;
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>这是定位解决布局方案</h2>
1.三栏布局中间部分
2.三栏布局中间部分
3.三栏布局中间部分
</div>
<div class="right"></div>
</article>
</section>3.通过flex-box布局解决三栏布局问题
3.1>给父盒子设置display：flex
3.2>给左右盒子分别设置宽度，中间盒子设置flex:1
<section class="layout flex">
<style>
.layout.flex{
margin-top: 160px;
}
.layout.flex .left-center-right{
display: flex;
}
.layout.flex .left{
width: 300px;
background: red;
}
.layout.flex .right{
width: 300px;
background: blue;
}
.layout.flex .center{
flex: 1;
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>这是flex布局解决三栏布局方案</h2>
1.三栏布局中间部分
2.三栏布局中间部分
3.三栏布局中间部分
</div>
<div class="right"></div>
</article>
</section>4.通过表格解决三栏布局问题
4.1>给父盒子设置display：table，设置父盒子高度，宽度百分百
4.2>给所有子盒子设置display：table-cell
4.3>分别设置左右盒子的宽度
<section class="layout table">
<style>
.layout.table .left-center-right{
display: table;
height: 120px;
width: 100%;
}
.layout.table .left-center-right div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .right{
width: 300px;
background: blue;
}
.layout.table .center{
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>这是table表格布局解决三栏布局方案</h2>
1.三栏布局中间部分
2.三栏布局中间部分
3.三栏布局中间部分
</div>
<div class="right"></div>
</article>
</section>5.通过网格布局解决三栏布局问题
5.1>给父盒子设置display：grid，宽度百分百，设置网格行高grid-template-rows，即父盒子高度，设置网格列单元格的宽度grid-template-columns:300px auto 300px(从左往右)
5.2>设置子盒子的背景颜色，方便查看
<section class="layout grid">
<style>
.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 120px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>这是grid网格布局解决三栏布局方案</h2>
1.三栏布局中间部分
2.三栏布局中间部分
3.三栏布局中间部分
</div>
<div class="right"></div>
</article>
</section>各种方案的优缺点：
1>浮动：
优点：兼容性较好；代码简单；清除浮动处理好的前提下一般没有其他问题。
缺点：脱离文档流，出现占位问题；清除浮动做不好出现高度塌陷问题。
2>定位：
优点：很快捷，配合js使用很方便。
缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。
3>flex布局：
优点：该方案可以解决上述两种方案的不足，是比较完美的一个；目前移动端的布局也都是用flexbox。
缺点：不能兼容IE8及以下浏览器。
4>表格布局：
优点：实现容易；兼容性好，IE8不支持flex但是支持table。
缺点：其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，有时候这种效果不是我们想要的。
5>网格布局：
优点：比较新，CSS3新出的标准，更简单化
1564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
