实现布局之前首先应该明白三栏布局到底是什么。
所谓三栏布局就是:左右两侧的宽度固定,中间部分的宽度随窗口的宽度变化而自适应。
嗯,知道三栏布局的概念之后,我们现在要做的就是如何实现这个布局。
方法一:我们可以使用flex弹性盒模型。左右两侧设置固定的宽度,中间部分宽度设置为100%,这样当窗口大小改变时中间部分就会随之变换。具体代码实现如下:
css样式部分:
.parent{
display: flex;
justify-content: space-between;
align-items: center;
height: 300px;
}
.parent div{
height: 300px;
}
.middle{
width: 100%;
background-color: #489ddf;
}
.left,.right{
width: 200px;
background-color: yellow;
}
css布局部分:
<div class="parent">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
方法二:使用BFC实现布局。同样的左右两侧宽度固定,但是给中间部分设置overflow:hidden使它触发BFC。
css样式部分:
.parent{
min-width: 400px; //设置最小宽度的目的是防止当窗口缩小到一定大小时出现换行。
}
.parent div{
height: 300px;
}
.left,.right{
width: 200px;
background-color: #489ddf;
float: left;
}
.right{
float: right;
}
.middle{
overflow: hidden;
background-color: yellow;
}
css布局部分:
<div class="parent">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>//把middle放到最后,不然会出现right部分换行的情况。
</div>
嗯,那么肯定会有小伙伴提问,如果不把middle部分最后渲染怎么解决换行的问题。我现在能想到就只有使用position来对rigth部分进行定位。具体代码实现如下:
css样式部分:
.parent{
min-width: 400px; //设置最小宽度的目的是防止当窗口缩小到一定大小时出现换行。
}
.parent div{
height: 300px;
}
.left,.right{
width: 200px;
background-color: #489ddf;
float: left;
}
.right{
float: right;
position: reletive;
top: -300px;
}
.middle{
overflow: hidden;
background-color: yellow;
}
css布局部分:
<div class="parent">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
方法三:使用双飞翼布局实现。首先应该明白双飞翼布局的基本思想,该布局就是给三部分都设置浮动,中间部分设置padding值,左右部分设置负的margin值来改变它们的位置。
css样式部分:
.parent{
min-width: 400px;
overflow: hidden;
}
.parent div{
height: 300px;
float: left;
}
.middle{
width: 100%;
background-color: yellow;
}
.main{
float: none;
padding: 0 200px;
}
.left,.right{
width: 200px;
background-color: #489ddf;
}
.right{
margin-left: -200px;
}
.left{
margin-left: -100%;
}
css布局部分:
<div class="parent">
<div class="middle"><div class="main"></div></div>
<div class="left"></div>
<div class="right"></div>
</div>
方法四:使用圣杯布局实现。
css样式部分:
.parent{
min-width: 400px;
padding: 0 200px;
overflow: hidden;
}
.parent div{
float: left;
height: 300px;
}
.middle{
width: 100%;
background-color: yellow;
}
.left,.right{
width: 200px;
background-color: #489ddf;
position: relative;
margin-left: -100%;
left: -200px;
}
.right{
margin-left: -200px;
left: 200px;
}
css布局部分:
<div class="parent">
<div class="middle"><div class="main"></div></div>
<div class="left"></div>
<div class="right"></div>
</div>
方法五:使用position实现布局。给左右两侧设置position属性改变它们的位置。
css样式部分:
.parent{
padding: 0;
min-width: 400px;
position: relative;
}
.parent div{
height: 300px;
}
.middle{
width: 100%;
background-color: yellow;
}
.left,.right{
width: 200px;
position: absolute;
top: 0;
background-color: #489ddf;
}
.left{
left: 0;
}
.right{
right: 0;
}
css布局部分:
<div class="parent">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
以上就是我知道的实现的三栏布局的几种方法,希望能够帮到大家!