【CSS】实现三栏布局的方式

【CSS】实现三栏布局的方式

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现如下：

① 利用浮动

• 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。
• 中间一栏设置左右两个方向的margin值。
• 注意这种方式，中间一栏必须放到最后。

.container {
    overflow: hidden;
}
.left {
    float: left;
    width: 100px;
    background: tomato;
}
.right {
    float: right;
    width: 100px;
    background: gold;
}
.center {
    
    background: lightgreen;
    margin: 0px 100px;
} 

下面给出html模板：

<section class="container">
    <article class="left"><br /><br /><br /></article>
    <article class="right"><br /><br /><br /></article>
    <!-- 中间一栏必须放到最后 -->
    <article class="center"><br /><br /><br /></article>
</section>

为什么中间一栏必须放在最后？

因为如果把中间一栏放在第二位置，那么最后一个盒子会挤到下一行进行显示，出现该现象的原因如下：

首先要知道两个基本知识点：

• 这个布局的实现是通过float属性来脱离文档流。
• div是块元素独占一行，在不设置宽度的情况下，是等于一行。

具体原因：
如果我们把中间盒子的标签放在第二个的话，由于前面设置了浮动，后面就会尾随其上，又由于它是块元素，那么它就是独占一行的。
所以下一个div就会在下一行显示。

② 利用绝对定位

• 利用绝对定位，左右两栏设置为绝对定位。
• 中间可以直接设置对应方向大小的margin的值。
• 中间也可以采用绝对定位，设置left和right值。

.container {
    position: relative;
}
.left {
    position: absolute;
    left: 0px;
    width: 100px;
    background: tomato;
}
.center {
    position: absolute;
    left: 100px;
    right: 100px;
    background: lightgreen;
}
/*.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}*/
.right {
    position: absolute;
    right: 0px;
    width: 100px;
    background: gold;
} 

下面给出html模板：

<section class="container">
    <article class="left"><br /><br /><br /></article>
    <article class="center"><br /><br /><br /></article>
    <article class="right"><br /><br /><br /></article>
</section>

③ 利用flex布局

• 利用flex布局，左右两栏设置固定大小\。
• 中间一栏设置为flex:1。

.container {
    display: flex;
}
.left {
    width: 100px;
    background: tomato;
}
.center {
    flex: 1;
    background: lightgreen;
}
.right {
    width: 100px;
    background: gold;
} 

④ 利用网格布局

使用grid网格布局实现三列布局，和之前所讲的gird实现双列布局是同样的思想，只是把列数变为了3，高度依然不设置，通过容器项的内容高度自适应撑开整体高度。

• 现在给类名为"container"的盒子添加"display: grid"属性，使该盒子成为网格布局容器。
• 再给该容器添加"grid-template-columns: 100px auto 100px"属性，表示该容器一共有3列，且宽度分别为100px、自适应、100px。
• 不需要设置行属性，当有多个元素时容器会自适应的往下顺次排列。
• 此时观察容器的高度，是根据容器项中高度最高的那一项决定的，也不会产生台阶式效果。

.container {
    display: grid;
    grid-template-columns: 100px auto 100px
}
.left {
    background: tomato;
}
.center {
    background: lightgreen;
}
.right {
    background: gold;
} 

⑤ 圣杯布局

• 圣杯布局，利用浮动和负边距来实现。
• 父级元素设置左右的 padding，三列均设置向左浮动。
• 中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行。
• 通过设置 margin 负值将其移动到上一行。
• 再利用相对定位，定位到两边。

* {
    margin: 0;
    padding: 0;
}
.container {
    overflow: hidden;
    padding: 0px 100px;
    border: 1px solid black;
    min-width: 100px;
}
.left {
    position: relative;
    left: -100px;
    float: left;
    width: 100px;
    margin-left: -100%;
    background-color: greenyellow;
}
.center {
    float: left;
    width: 100%;
    background-color: darkorange;
}
.right {
    position: relative;
    left: 100px;
    float: left;
    width: 100px;
    margin-left: -100px;
    background-color: darkgreen;
}

下面给出html模板：

<section class="container">
    <article class="center"><br /><br /><br /></article>
    <article class="left"><br /><br /><br /></article>
    <article class="right"><br /><br /><br /></article>
</section>

⑥ 双飞翼布局

• 双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。
• 本质上来说，也是通过浮动和外边距负值来实现的。

* {
    margin: 0;
    padding: 0;
}
.container {
    overflow: hidden;
    border: 1px solid black;
}
.left {
    float: left;
    margin-left: -100%;
    width: 100px;
    background-color: greenyellow;
}
.main {
    margin: 0px 100px;
    background-color: darkorange;
}
.right {
    float: left;
    width: 100px;
    margin-left: -100px;
    background-color: darkgreen;
}
.center {
    float: left;
    width: 100%;
}

下面给出html模板：

<section class="container">
    <article class="center"><br /><br /><br /></article>
    <article class="left"><br /><br /><br /></article>
    <article class="right"><br /><br /><br /></article>
</section>