页面布局之三栏布局
题目一.假设高度已知,请写出三栏布局,其中左栏,右栏宽度各位300px,中间自适应,请举出几种解决方案
1、浮动解决方案
浮动布局主要通过在中间层的两边添加2个div,分别为左浮动和右浮动,宽为300px
html代码:
<section class="layout float">
<article class="left-right-center"
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
1、这是浮动解决方案
2、这是浮动解决方案
</div>
</article>
</section>
css代码:
.layout article diV{
min-height: 100px;
}
.layout.float .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yellow;
}
效果图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/27f900e3c75ca77f46239f8b6a3879d5.png)
2、绝对定位布局
绝对定位布局主要通过将left right center层分别设置绝对定位position: absolute属性,然后将left和right层分别left和right值设为300px,再让center层left和right的值设为300px,已达到自适应居中布局
html代码:
<section class="layout absolute">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
这是三栏布局绝对定位中间部分
这是三栏布局绝对定位中间部分
</div>
<div class="right"></div>
</article>
</section>
css代码:<style type="text/css">
.layout.absolute .left-center-right>div{
position: absolute;
}
.layout.absolute .left{
left: 0;
width:300px;
background: red;
}
.layout.absolute .center{
left:300px;
right:300px;
background: yellow;
}
.layout.absolute .right{
right: 0;
width: 300px;
background: blue;
}
</style>
3、flex布局
flex布局自适应的主要是实现方法给父容器添加display:flex,然后给center添加flex:1,使中间层自适应。
html代码:
<section class="layout flexbox">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flex解决方案</h1>
1、这是FLEX解决方案
2、这是FLEX解决方案
</div>
<div class="right"></div>
</article>
</section>
CSS代码:<style>
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex: 1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
4、表格布局表格布局父容器指定display为table,每个div的display为table-cell,left和right设置width:300px便可以实现三栏自适应布局
html:
<section class="layout table">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>这是表格布局</h1>
我是表格布局的中间层
我是表格布局的中间层
</div>
<div class="right"></div>
</article>
</section>
css:<style type="text/css">
.layout.table .left-center-right{
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
background: red;
width: 300px;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
background: #0000FF;
width: 300px;
}
</style>
5、网格布局
网格布局grid,具体可以在http://www.css88.com/archives/8506了解
给父元素定义display为grid便可以使用网格布局
为了使起成为二维网格,我们需要定义列和行,我们使用grid-template-rows和grid-template-columns定义列和行,在下面的demo中我们可以看到-rows的为一个值,代表定义一行,-columns为三个值代表3列。
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
html:
<section class="layout grid">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>网格布局解决方案</h1>
这是网格布局解决方案的中间部分
这是网格布局解决方案的中间部分
</div>
<div class="right"></div>
</article>
</section>
css:.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
}
.layout.grid .left{
background: #FF0000;
}
.layout.grid .center{
background: #FFFF00;
}
.layout.grid .right{
background: #0000FF;
}
</style>
二、当高度不固定时五种布局的显示方式由上图我们可以看出,只有表格布局和flex布局会自动将左右两栏一起撑开。
浮动布局可以通过创建BFC来解决