三栏布局

最新推荐文章于 2024-03-06 14:42:16 发布

原创最新推荐文章于 2024-03-06 14:42:16 发布 · 535 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#三栏布局 #圣杯布局 #双飞翼布局

questions 专栏收录该内容

6 篇文章

订阅专栏

三栏布局

介绍一下如何实现三栏布局（圣杯布局、双飞翼布局）。

目录：

三栏布局

介绍

三栏布局，即两边的盒子宽度固定，中间的盒子自适应，窗口变大变小不影响两边盒子的大小，中间的盒子随之变化。

圣杯布局

第一步：布局结构：

// html
<header><h4>Header</h4></header>
<div class="container">
    <div class="center"><h4>Center</h4></div>
    <div class="left"><h4>Left</h4></div>
    <div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>

// css
header, footer{width: 100%;height: 40px;background-color: blueviolet;}
.container{height: 200px; overflow: hidden;}
.center{float: left; width: 100%; height: 200px; background-color: greenyellow;}
.left{float: left; width: 200px;height: 200px; background-color: red;}
.right{float: left; width: 200px; height: 200px; background-color: blue;}

这时候，我们可以看到，因为 center 盒子的宽度设为为 100% 而且我们在 .container 设置了 overflow: hidden; ，所以 left 和 right 在 center 的下一行被隐藏掉了。

注意三栏需要先写中间盒子！

第二步：设置负边距：

让左盒子去到中间盒子的左边，设置其左边距为 -100%(即负中间盒子的宽度)：.left{margin-left: -100%;}。
让右盒子去到中间盒子的左边，设置其左边距为 -200px(即负自身宽度)：.right {margin-left：-200px;}。
这时候已经基本实现了三栏布局，但是，我们可以看到中间盒子的两边都分别被左右盒子所覆盖挡住。

第三步：设置父元素的内边距以及对左右盒子使用相对定位：

设置父级元素的左右内边距，这样三个盒子便会和浏览器的左右边界保持一段距离：.container{ padding: 0 200px;}。
对左右盒子使用相对定位，使它们分别移动到刚刚父元素空出来的空位上：

.left{position: relative; left: -200px;}
.right{position: relative;right: -200px;}

这样三步就实现了圣杯布局。

双飞翼布局

// html
<header><h4>Header</h4></header>
<div class="container">
    <div class="center-wrap">
        <div class="center"><h4>Center</h4></div>
    </div>
    <div class="left"><h4>Left</h4></div>
    <div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>

// css
.container{height:200px;overflow:hidden;}
.center-wrap{float:left;width: 100%;height: 200px;}
.center{margin-left:200px;margin-right: 200px;height: 200px; background-color: greenyellow;}
.left{float:left;margin-left: -100%; width: 200px;height: 200px;background-color: red;}
.right{float:left;margin-left: -200px; width: 200px;height: 200px;background-color: blue;}

双飞翼布局和圣杯布局的方法差不多，不同的是，这次不再是给父级元素 container 设置左右内边距，而是给中间盒子加一层 div(.center-wrap)，此时 center-wrap 的宽度为 100%，就像圣杯布局一样会被左右盒子挡住，然后我们再给其子元素 center 设置左右边距，这样就大功告成了。

注意这里的中间盒子依旧是排在最前面的盒子。

绝对定位

// html
<header><h4>Header</h4></header>
<div class="container">
    <div class="left"><h4>Left</h4></div>
    <div class="center"><h4>Center</h4></div>
    <div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>

// css
.container{position: relative; height: 200px; overflow: hidden;}
.left{position: absolute; top:0; left: 0; width: 200px; height: 200px; background-color: red;}
.center{margin:0 200px; width: 100%; height: 200px; background-color: greenyellow;}
.right{position: absolute; top:0; right: 0; width: 200px; height: 200px; background-color: blue;}

使用绝对布局之前，要先给父级元素 container 定义一个相对布局（relative），应为绝对布局是相对于离它最近的一个已定位的父级元素进行定位的方法，然后左右盒子使用绝对布局定位到中间盒子的两侧，接着给中间盒子设置左右的外边距，这样便大功告成了。

自身浮动

// html
<header><h4>Header</h4></header>
<div class="container">
    <div class="left"><h4>Left</h4></div>
    <div class="right"><h4>Right</h4></div>
    <div class="center"><h4>Center</h4></div>
</div>
<footer><h4>Footer</h4></footer>

// css
.container{height:200px; overflow:hidden;}
.left{float: left; width: 200px; height: 200px; background-color: red;}
.center{margin:0 200px; width: 100%; height: 200px; background-color: greenyellow;}
.right{float: right; width: 200px; height: 200px; background-color: blue;}

这个方法只需使左右盒子分别向左向右浮动，然后给中间盒子设置外边框即可。

flex布局

// html
<header><h4>Header</h4></header>
<div class="container">
    <div class="left"><h4>Left</h4></div>
    <div class="center"><h4>Center</h4></div>
    <div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>

// css
.container{display: flex; overflow:hidden;}
.left{width: 200px; height: 200px; background-color: red;}
.center{flex: 1; height: 200px; background-color: greenyellow;}
.right{width: 200px; height: 200px; background-color: blue;}

这个方法只需将中间盒子的 flex-grow、flex-shrink 和 flex-basis 都设置为1即可。

flex-grow：当有多余空间时，定义元素的放大比例（0 默认值，不放大，1为等比填充）。
flex-shrink：当空间不足时，定义元素的缩小比例（ 1 默认值，等比缩小，数值越大缩小越多）。
flex-basis：定义元素在主轴上占据的空间。

calc函数

// html
<header><h4>Header</h4></header>
<div class="container">
    <div class="left"><h4>Left</h4></div>
    <div class="center"><h4>Center</h4></div>
    <div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>

// css
.container{heigiht: 200px; overflow:hidden;}
.left{float: left; width: 200px; height: 200px; background-color: red;}
.center{float: left; width: calc(100% - 400px); height: 200px; background-color: greenyellow;}
.right{float: left; width: 200px; height: 200px; background-color: blue;}