在前端页面设计的时候,经常会出现左、中、右三栏布局的情况,往往左右两栏是一个固定值,而中间一栏是自适应,在面对这样的情况下,应该使用什么样的设计方案呢?本篇文章会介绍五种常用的解决方式,这五种方式可以根据具体的情况进行选择,接下来就逐一介绍。
首先我们先来看一下效果图:
这里是公用的代码部分:
<head>
<meta charset="utf-8">
<title>五种方式解决三栏布局</title>
<style type="text/css">
html * {
padding: 0;
margin: 0;
}
.layout {
margin-top: 20px;
}
.layout div {
min-height: 100px;
}
</style>
</head>
一.浮动解决方式
<!-- 浮动解决方式 -->
<div class="layout float">
<style type="text/css">
.layout.float .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background:red;
}
.layout.float .center{
background: yellow;
}
</style>
<div class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方式</h1>
1.这是三栏布局的正中间部分
</div>
</div>
</div>
方式一是利用float属性把左、右两栏分别设置浮动,中间部分自适应,解决三栏布局。
优点:兼容性比较好,把清除浮动和其他浮动周边的元素处理好的话,兼容性还是可以的。
缺点:设置浮动后,脱离了文档流,处理不好的话,会带来很多问题。
二、绝对定位解决方式
<!-- 绝对定位解决方式 -->
<div class="layout absolute">
<style type="text/css">
.layout.absolute .left-right-center>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: red;
}
</style>
<div class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>绝对定位解决方式</h1>
1.这是三栏布局的正中间部分
</div>
<div class="right"></div>
</div>
</div>
方式二是使用绝对定位的方式,使用position:absolute属性,对三个div进行绝对定位,然后分别使用位置属性,解决三栏布局。
优点:快捷,不容易出问题
缺点:本身脱离了文档流,就会导致子元素跟着脱离文档流,因此,导致绝对定位的有效性和可使用行比较差。
三、flexbox解决方式
<!-- flexbox解决方式 -->
<div class="layout flexbox">
<style type="text/css">
.layout.flexbox .left-right-center{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex: 1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: red;
}
</style>
<div class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>flexbox解决方式</h1>
1.这是三栏布局的正中间部分
</div>
<div class="right"></div>
</div>
</div>
方式三是使用弹性布局的样式,是CSS3新增的属性display:flex, 给左、右两栏设置宽度,中间栏使用flex设置弹性布局,解决三栏分布。CSS3中推出的布局,就是为了解决上述两种方式不足而出现的,算是比较完美的一种方式,尤其是对于移动端。
四、表格布局解决
<!-- 表格布局方式 -->
<div class="layout table">
<style type="text/css">
.layout.table .left-right-center{
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-right-center>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
width: 300px;
background: red;
}
</style>
<div class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>表格布局解决方式</h1>
1.这是三栏布局的正中间部分
</div>
<div class="right"></div>
</div>
</div>
方式四是利用表格布局,把三栏看成一行的三列,设置表格的高度,三个div设置display:table-cell属性,解决三栏布局。
优点:表格布局在很多场景都很适用,它的兼容性也是非常好的,当flex解决不了问题的时候,表格布局未尝不是一种方式。
缺点:本身存在一些历史诟病,还有就是,当其中一个单元格高度超出的时候,其他单元格也会跟着调整。
五、网格布局解决方式
<!-- 网格布局方式 -->
<div class="layout grid">
<style type="text/css">
.layout.grid .left-right-center{
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: red;
}
</style>
<div class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>网格布局解决方式</h1>
1.这是三栏布局的正中间部分
</div>
<div class="right"></div>
</div>
</div>
方式五是使用这几年的新热点,把页面分割成一个个网格样式,设置几行几列,使用auto变量是为了中间栏自适应,网格布局可以使代码更加简单,方便实现逻辑。
以上就是本篇文章所讲的五种方式来解决三栏分布的的情况,每种方式有各自的优缺点,可以根据具体的设计要求选择不同的方案。