HTML5 | 0 5 0 - 三列自适应布局 -【终极版三叉戟】

上一期我们介绍了自适应双列布局~

现在介绍进阶版的三列自适应布局

所谓自适应，就是通过文档流，进行同步缩放。
不懂什么是文档流，请去 049 自行挖掘。。。

本次虽然就是在 046 三叉戟布局【主流布局】添加文档流。

但是！

一定是更为复杂，否则对不起【终极版三叉戟】如此响亮的名字！
三列自适应布局要求左右两列宽度相等，中间一列自适应
为了让自己更加文艺些
~

先来搞几个酸诗排排版：
绝代只西子，众芳惟牡丹。——白居易《牡丹》墙角数枝梅，凌寒独自开。 —— 王安石《梅》花中真君子，风姿寄高雅。—— 张学良《咏兰诗》上代码前，问一下，JB 公司的 WebStorm 好用不？

不会用的话，请点这里，不谢~

好用不好用都要逼着自己用！

Title


         白居易《牡丹》

         绝代只西子，众芳惟牡丹。


         王安石《梅》

         墙角数枝梅，凌寒独自开。


         张学良《咏兰诗》

         花中真君子，风姿寄高雅


效果图：

在上述代码中，外层一个大 div-page。

内层三个小 div - main + left + right。

额外使用 div 的 col 属性，就是能了统一修改 div 列

接下来，就要动手修饰了。

为三列设置不同的背景色，听说现在很流行绿色

那咱们就选绿色的主调调吧~ #9F9、#6F6、#3F3

设置左、右宽度固定，中间 100%。
#left{
         background: #9F9;
         width: 300px;
      }
      #main{
         background: #6F6;
         width: 100%;
      }
      #right{
         background: #3F3;
         width: 300px;
      }
      .col{
         float: left;
         height: 666px;
      }

效果图：

此处不要握草，一切都在控制当中！

relax~~

添加浮动效果后，文档流排序是酱紫滴：

body 中第一个是 main，所以排在了第一行，宽度随意。

然后由于 left、right 设置了宽度 300px，所以在文档流中就被挤到下一行了。

先修改下左侧列的位置。

为 left 设置了左侧外边距为 -100%，就是让他的宽度会变成最长的。

原本第一行没有空余位置，都被 main 占据着，left、right 都被挤到第二行。

而向左缩进 -100% 宽度后，left 列正好到了布局的最左侧。
  #left{
         margin-left: -100%;
      }

效果图：

嗯，不错，接下来调整 right。

同理让 right 的右外边距为宽度 300px，向右就是 -300px。

那么 right 列就可以进入文档流。
#right{
         margin-right: -300px;

效果图：

看到了吗，right 跑到了右侧，有一部分还是遮盖住了。

还需要为左和右创建更加合适的空间。

这次就通过 div - page，来为左右内边距 padding 留出空间。
  #page{
         padding-left: 300px;
         padding-right: 300px;
      }

效果图：

现在分别为 page 左右各留出了 300px 像素。

由图可知，由于右内边距的设置，mai 被向左推移了 300px。

刚好留下了足够的右侧空间，使得 right 正常无遮盖的回到了窗口。

又由于左内边距，left 和 main 列都被向右推开，以至于整个布局在左侧出现了 300px 的空白。

老规矩，只需要让 left 左移 300px 即可。

由于 margin-left 属性已经被设置为了-100%，所以就没法左移了。

那咋办呢？

还可以设置 left 列为相对定位，再设置 right 属性为 300 实现水平位移。

使得 left 列距离其右侧 300px，即向左偏移 300px
   #left{
         position: relative;
         right:300px;
      }

效果图：

这次中间的牡丹就出来了吧～

因为之前设置 300 太窄了，所以把参数修改为 400，然后设置居中。
   #left{
         background: #9F9;
         width: 400px;
         margin-left: -100%;
         position: relative;
         right:400px;
      }
      #main{
         background: #6F6;
         width: 100%;
      }
      #right{
         background: #3F3;
         width: 400px;
         margin-right: -400px;
      }
      .col{
         float: left;
         height: 666px;
      }
      #page{
         padding-left: 400px;
         padding-right: 400px;

效果图：

握草。。。居然忘记修改样式了
.col{
         float: left;
         height: 666px;
         color: #FF44AA;
         font-family: "STFangsong";
      }
      #page p{
         font-size: 20px;
         margin-top: 350px;
      }
      .col img{
         float: left;
      }

效果图：

随意拖拽，左右固定，中间自适应：

搞定收工！

强烈建议订阅专辑：
HTML5 - 庖丁解牛

戳原文，更有料！