题目:假设高度已知,请写出三栏布局,其中左栏、右栏各为300px,中间自适应。
0.基础样式
<style media="screen">
html *{
padding: 0;
margin: 0;
}
.layout{
margin-top: 20px;
}
.layout article div{
min-height: 100px;
}
</style>
1.浮动布局
<!--浮动布局-->
<section class="layout float">
<style media="screen">
.layout.float .left{
float: left;
width: 300px;
background-color: red;
}
.layout.float .right{
float: right;
width: 300px;
background-color: red;
}
.layout.float .center{
background-color: blue;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
1.这是三栏布局的中间部分
2.这是三栏布局的中间部分
3.这是三栏布局的中间部分
4.这是三栏布局的中间部分
5.这是三栏布局的中间部分
6.这是三栏布局的中间部分
</div>
</article>
</section>
2.绝对布局
<!--绝对布局-->
<section class="layout absolute">
<style>
.layout.absolute .left-center-right>div{
position: absolute;
}
.layout.absolute .left{
left: 0;
width: 300px;
background-color: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background-color: blue;
}
.layout.absolute .right{
right: 0;
width: 300px;
background-color: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
1.这是三栏布局的中间部分
2.这是三栏布局的中间部分
3.这是三栏布局的中间部分
4.这是三栏布局的中间部分
5.这是三栏布局的中间部分
6.这是三栏布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
3.flexbox布局
<!--flexbox布局-->
<section class="layout flexbox">
<style>
.layout.flexbox{
margin-top: 140px;
}
.layout.flexbox .left-center-right{
display: flex;/*声明此容器是flexbox布局*/
}
.layout.flexbox .left{
width: 300px;
background-color: red;
}
.layout.flexbox .center{
flex: 1;/*此部分自适应*/
background-color: blue;
}
.layout.flexbox .right{
width: 300px;
background-color: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flexbox解决方案</h1>
1.这是三栏布局的中间部分
2.这是三栏布局的中间部分
3.这是三栏布局的中间部分
4.这是三栏布局的中间部分
5.这是三栏布局的中间部分
6.这是三栏布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
4.表格布局
<!-- 表格布局 -->
<section class="layout table">
<style>
.layout.table .left-center-right{
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background-color: red;
}
.layout.table .center{
background-color: blue;
}
.layout.table .right{
width: 300px;
background-color: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>表格布局解决方案</h1>
1.这是三栏布局的中间部分
2.这是三栏布局的中间部分
3.这是三栏布局的中间部分
4.这是三栏布局的中间部分
5.这是三栏布局的中间部分
6.这是三栏布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
5.网格布局
<!-- 网格布局 -->
<section class="layout grid">
<style>
.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
}
.layout.grid .left{
background-color: red;
}
.layout.grid .center{
background-color: blue;
}
.layout.grid .right{
background-color: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>网格布局解决方案</h1>
1.这是三栏布局的中间部分
2.这是三栏布局的中间部分
3.这是三栏布局的中间部分
4.这是三栏布局的中间部分
5.这是三栏布局的中间部分
6.这是三栏布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
6.延伸
1.五种方案优缺点?
- 浮动:脱离文档流,常见问题在于清除浮动,优点是兼容性比较好;
- 绝对定位:优点是快捷,缺点是布局脱离文档流,那么其子元素也要脱离文档流,导致有效性(可使用性)比较差;
- flexbox:css3中新出现的解决方式,可解决前两个方案的不足,是比较完美的,不兼容ie8,在现代移动端,基本使用flex布局;
- table:历史上说起麻烦,操作繁琐,对seo不友好,当某一个单元格高度变化时,其余表格跟着调整高度,但有的场景不需要;优点:兼容性非常好,pc可兼容ie8;
- grid:新技术,960宽,12列,代码简单;
2.假设高度不确定,根据中间文字自适应,哪个适用?
- 不能用:浮动,绝对定位,grid
- 能用:flexbox,table
3.5种方案的兼容性如何?最优方案是哪个?
4.延伸
- 三栏式布局: 1.左右宽度固定,中间自适应; 2.上下高度固定,中间自适应;栗子
- 两栏式布局: 1.左宽度固定,右自适应;栗子 2.右宽度固定,左自适应; 3.上宽度固定,下自适应; 4.下宽度固定,上自适应;
7.示例
- 三栏式布局的5种方案
- 页面宽度变小时
- 文字内容将高度撑开
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。