三栏布局
三栏布局
- 定义：包含左中右三栏，左边列和右边列的宽度都是固定的，中间列的宽度是自适应的
法一：float浮动
- right右侧的盒子需要放到中间盒子的前面，否则如果将右侧盒子放到最后会导致右侧布局掉下来
<div class="containerFloat">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
<style>
.left {
float: left;//左边开启左浮动
background-color: #ed1f13;
width: 20vw;
height: 20vh;
}
.right {
float: right;//右边开启右浮动
background-color: #0096f8;
width: 20vw;
height: 20vh;
}
.center {
background-color: #55d535;
height: 20vh;
margin: 0 20vw;//左右边距空出来
/* 将 margin: 0 20vw 替换成 overflow: hidden;触发主元素的BFC，使得主元素环绕着浮动的元素 */
//overflow: hidden;
}
</style>
法二：定位实现
- 给父元素开启相对定位，然后给左右块添加绝对定位，分别设置left和right为0，让二者分别靠左右布局，中间块设置margin后会自动在两个定位块的中间渲染，同样需要把中间块放到最后
<div class="containerPosition">
<div id="Pleft"></div>
<div id="Pright"></div>
<div id="Pbody"></div>
</div>
<style>
.containerPosition {
position: relative;//父元素开启相对定位
}
.Pleft {
position: absolute;//绝对定位
left: 0;//靠左布局
background-color: #ed1f13;
width: 20vw;
height: 20vh;
}
.Pright {
position: absolute;//绝对定位
right: 0;//靠右布局
background-color: #0096f8;
width: 20vw;
height: 20vh;
}
.Pbody {
background-color: #55d535;
height: 20vh;
margin: 0 20vw;//中间渲染
}
</style>
法三：flex弹性盒实现
- flex正常按照顺序布局就可以，原理是使用flex开启弹性盒布局，给左右块设置好宽度的情况下，给中间块指定flex:1 就会让它自适应宽度 否则不指定宽度不显示
<div class="containerFlex">
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</div>
<style>
.containerFlex{
display: flex;
}
#left {
background-color: #ed1f13;
width: 20vw;
height: 20vh;
}
#main {
/* 给中间块添加flex:1 就会让它自适应宽度 否则不指定宽度不显示 */
flex: 1;
background-color: #55d535;
height: 20vh;
}
#right {
background-color: #0096f8;
width: 20vw;
height: 20vh;
}
</style>
法四：table实现
- 开启table布局，三块栏设置table-cell 三块就会平分屏幕宽度 没有table-cell的元素不显示，同时给左右table-cell同时设置width宽度，可以自定义宽度，不设置宽度就是平分宽度
<div class="containerTable">
<div id="Tleft"></div>
<div id="Tbody"></div>
<div id="Tright"></div>
</div>
<style>
.containerTable{
display: table;
width: 100%;
}
.Tleft {
display: table-cell;
background-color: #ed1f13;
width: 20vw;
height: 20vh;
}
.Tbody {
display: table-cell;
background-color: #55d535;
height: 20vh;
margin: 0 20.5vw;
}
.Tright {
display: table-cell;
background-color: #0096f8;
width: 20vw;
height: 20vh;
}
</style>
法五：圣杯布局实现
-
圣杯布局是以中间块为核心，所以需要将中间块放在HTML的第一行
1、首先三块都设置为左浮动并给左右块设置具体宽度
2、中间块宽度设置为100%并且设置margin-left和margin-right，用于给左右侧留取空间，但是此时左右块被挤压到下部【浮动布局中main占100%，后面的浮动布局会被挤到下一行】。
3、设置左块的margin-left为-100%，右侧块margin-left为-20vw，让左右块回到第一行main的最左侧和最右侧
4、给左右块设置相对定位，设置left和right-20vw，使其移动，露出中间块，从而实现圣杯布局三栏布局
<template>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</template>
<script>
</script>
<style>
.container {
margin: 0 20vw;//空出左右的位置
}
.main {
float: left;
background-color: #55d535;
height: 20vh;
width: 100%;//左右会因为无宽度被挤到下一行
}
.left {
float: left;
background-color: #ed1f13;
height: 20vh;
width: 20vw;
margin-left: -100%; //左块移动到main的左侧
position: relative;//开启相对定位
left: -20vw; //向左移动，露出中间元素
}
.right {
float: left;
background-color: #0096f8;
height: 20vh;
width: 20vw;
margin-left: -20vw;//右块移动到main的右侧
position: relative;//开启相对定位
right: -20vw; //向右移动
}
</style>
法六：双飞翼布局
-
双飞翼布局和圣杯布局很类似，都是以中间块为核心，然后不同的是此时没有设置父容器container的左右外边距【可以直接去掉container容器】同时没有使用相对定位去使得左右块定位到左右两侧
由于没有container容器以及样式，所以两边的20vw的margin值是没有的，这样就导致中间盒子被两边盒子给遮挡，此时我们将main盒子外边包一个父元素，将外边的父元素设置左浮动，并且设置宽度100%，然后在main中间盒子设置左右margin为20px即可，其他与圣杯式大致一样
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
<style>
.content {
float: left;//父元素加浮动
width: 100%;
}
.main {
background-color: #55d535;
height: 20vh;
margin: 0 20vw;//离左右的位置
}
.left {
float: left;
background-color: #ed1f13;
height: 20vh;
width: 20vw;
margin-left: -100%;
}
.right {
float: left;
background-color: #0096f8;
height: 20vh;
width: 20vw;
margin-left: -20vw;
}
</style>
