CSS 两栏布局和三栏布局

两栏布局

基础部分的代码：

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
}
.right {
    height: 150px;
    background-color: #94E8FF;
}
复制代码

此时的 .left 和 .right 独占一行，如何实现两个 div 元素排在一行呢？ 1.设置 display 为 inlin-block inline-block 兼具块级元素可以设置宽高和行内元素不独占一行的特性，设置了 inline-block 的两个 div 之间会有间距，记得消除。由于左边是固定的，总的宽度是 100%，要计算右边的宽度，可以使用 calc 来计算。

.container {
    font-size: 0;    /* 消除间距 */
}
.left, .right {
    display: inline-block;
}
.right {
    width: calc(100% - 100px);   /* 计算宽度，运算符号左右一定要有空格 */
}
复制代码

2.使用 float 处于文档流中的块级元素无法感知到浮动元素的存在，如果设置 .left 为 左浮动，.right 会当 .left 不存在，由于块级元素的默认宽度是父级元素的 100%，此时 .right 的宽度就已经是 100% 了，无需再计算。**别忘了设置 .right 的 margin 值来给 .left 预留空间，让两者看起来是和谐相处的。**这便是第一种方法，代码如下：

.left {
    float: left;
}
.right {
    margin-left: 100px;   /* 为 .left 留出空间 */
}
.container {
    overflow: hidden;    /* 别忘了清除浮动 */
}
复制代码

浮动元素会脱离文档流，直到它碰到父元素的边框或另一浮动元素为止，因此，我们可以还设置 .left、.right 均左浮动，这时，它们便会紧贴着排列在一行。因为 .right 是浮动的，所以需要计算宽度。这是第二种方法：

.left {
    float: left;
}
.right {
    float: left;
    width: calc(100% - 100px);
}
.container {
    overflow: hidden;
}
复制代码

.left 浮动的时候，.right 会无视 .left，有没有不无视，留出位置的可能？有的，让 .right 形成 BFC，.right 就不会和 .left 重合了。BFC 不会忽视浮动元素，这也是它的特点之一。这是第三种方法：

.left {
    float: left;
}
.right {
    overflow: auto;    /* 形成 BFC */
}
.container {
    overflow: hidden;
}
复制代码

3.使用absolute 设置 .left 的 postion 为 absolute，.left 脱离了文档流，.right 会无视 .left 的存在。

.container {
    position: relative;
}
.left {
    postion: absolute;
}
.right {
    margin-left: 100px;
}
复制代码

三栏布局

三栏布局中耳熟能详的便是圣杯布局和双飞翼布局了。圣杯布局来源于2006年的一篇文章：In Search of the Holy Grail。双飞翼布局始于淘宝 UED。两者都是在解决两边固定宽度，中间自适应的三栏布局，并且主要内容要优先渲染，按照 DOM 从上至下的加载原则，中间的自适应部分要放在前面。

圣杯布局

我们首先将布局的基础框架搭出来，在下面代码中，父 div 包含了三个子 div，我们将 .center 写在最前面，方便最先渲染。为了保证窗口缩小时仍然能展示，我们给 body 设置了最小宽度。

扫描二维码关注公众号，回复： 4377387 查看本文章

<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
body {
    min-width: 630px;
}
.center {
    width: 100%;
    height: 150px;
    background-color: #94E8FF;
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
}

复制代码

三个子 div 各占一行显示了，此时我们给三者都加上左浮动看看效果。

.container {
    overflow: hidden;   /* 清除浮动 */
}
.center, .left, .right {
    float: left;
}
复制代码

由于 .center 设置了 100% 的宽度，所以 .left 和 .right 都被挤到下面去了，此时我们要解决的问题就是，如何让它两上去，这就要用到 margin 的负值了。我们知道 margin-left: 10px; 是设置 10px 的左外边距，左边要多空出一点，视觉效果上就是向右移动了 10px，那如果 margin-left: -10px; 呢？左外间距要减少 10px，自然是向左移动 10px 了。

我们回到要解决的问题中，因为 .center 的宽度是 100%，所以 .left 和 .right 排在了第二行，可以理解为排在了 .center 的后面。这个时候，.left 要回到 .center 的最左边，便是要向左移动 .center 的宽度，即 100%，.left 移动了知之后，.right 会自动补上 .left 的空位，此时，.right 想要达到 .center 的最右边，只需要向左移动它自己本身的宽度就可以了，即 200px。

.left {
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}
复制代码

仔细一看发现，.center 的文字被遮挡了，此时 .left、.right 都覆盖在 .center 的上面，我们要给两者留出位置。

圣杯布局的做法是先设置父元素 .container 的 padding 属性，给 .left、.right 留出空间，两者需要的空间大小便是两者的宽度，然后利用定位属性使其归位。我们先设置 padding 看看效果。

.container {
    padding-left: 100px;
    padding-right: 200px;
}
复制代码

由于父元素设置了 padding，所有子元素都往中间挤了，此时只需将 .left、.right 分别向左向右拉到准备的空位就好了。首先将定位属性设置为 relative，即相对自己定位，.left 要向左移动 100px，.right 要向右移动 200px，所以 .left 只要设置 left: -100px; 、.right 设置 right: -200px; 便能达到效果。

.left {
    position: relative;
    left: -100px;
}
.right {
    position: relative;
    right: -200px;
}
复制代码

到这里，圣杯布局便完成了，它的核心思想是使用浮动布局，用 padding 为左右元素留空间，灵活使用 margin 的负值和相对定位让元素移动到相应的位置。完整的代码如下：

<div class="container">
     <div class="center">center</div>
     <div class="left">left</div>
     <div class="right">right</div>
</div>

body {
    min-width: 630px;
}
.container {
    overflow: hidden;
    padding-left: 100px;
    padding-right: 200px;
}
.center {
    width: 100%;
    height: 150px;
    background-color: #94E8FF;
    float: left;
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
}
复制代码

双飞翼布局

双飞翼布局与圣杯布局的前部分一样，在给左右两边元素留出位置的思路有区别。圣杯布局是设置了父元素的 padding 留出空间，之后利用 relative 来归位。双飞翼则是多加了一个 div，将中间自适应部分包裹起来，利用子 div 的 margin 来给左右元素留空间。

<div class="container">
    <div class="center-container">
        <div class="center"></div>
    </div>
    <div class="left">left</div>
    <div class="right">left</div>
<div>

body {
    min-width: 630px;
}
.container {
    overflow: hidden;
}
.center-container {
    width: 100%;
    float: left;
}
.center-container .center {
    height: 150px;
    background-color: #94E8FF;

    margin-left: 100px;        /* 新添加的属性 */
    margin-right: 200px;       /* 新添加的属性 */
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
    float: left;
    margin-left: -100%;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
    float: left;
    margin-left: -200px;
}
复制代码

同样的问题，双飞翼布局通过多加一个 div 并使用了 margin 来实现，圣杯布局则是使用 padding、相对定位（relative）、设置偏移量（left、right）来实现，相对来说，双飞翼布局更容易理解。在圣杯布局中，无限缩小屏幕（假设没有设置 body 的最小宽度），当 .main 的宽度小于 .left 时，会出现布局错乱。

简单的flex布局实现三栏

基础代码：

<div class="container">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.center {
    height: 150px;
    background-color: #94E8FF;
}

.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
}
复制代码

我们首先将容器设置为 Flex 布局：

.container {
    display: flex;
}
复制代码

接下来要解决的问题有，如何将 .left 排列在最左边，和如何将 .center 占满剩余空间。在项目属性的学习中，order 属性可以改变项目的排列顺序，flex-grow 可以定义项目的放大比例。没错，利用这两个属性便能解决我们的问题。

.left {
    order: -1;
}

.center {
    flex-grow: 1;   /* flex: 1; 也行 */
}
复制代码

Flex 布局相对于传统布局更灵活好用，上面只是给出了一个方法，更多的方法期待大家去探索。

感谢阅读本文。 本文整理自CCS布局实践的部分内容。