上一期我们介绍了自适应双列布局~
现在介绍进阶版的三列自适应布局
所谓自适应，就是通过文档流，进行同步缩放。不懂什么是文档流，请去自行挖掘。。。
本次虽然就是在三叉戟布局添加文档流。
但是！
一定是更为复杂，否则对不起如此响亮的名字！
三列自适应布局要求左右两列宽度相等，中间一列自适应
为了让自己更加文艺些~
先来搞几个酸诗排排版：
绝代只西子，众芳惟牡丹。——白居易《牡丹》墙角数枝梅，凌寒独自开。——王安石《梅》花中真君子，风姿寄高雅。——张学良《咏兰诗》上代码前，问一下，JB公司的WebStorm好用不？
不会用的话，请点这里，不谢~
好用不好用都要逼着自己用！
!DOCTYPEhtml
htmllang="en"
head
metacharset="UTF-8"
titleTitle/title
styletype="text/css"
/style
/head
body
divid="page"
divid="main"class="col"
h1白居易《牡丹》/h1
imgsrc="1.png"
p绝代只西子，众芳惟牡丹。/p
/div
divid="left"class="col"
h1王安石《梅》/h1
imgsrc="2.png"
p墙角数枝梅，凌寒独自开。/p
/div
divid="right"class="col"
h1张学良《咏兰诗》/h1
imgsrc="3.png"
p花中真君子，风姿寄高雅/p
/div
/div
/body
/html
效果图：
在上述代码中，外层一个大div-page。
内层三个小div-main+left+right。
额外使用div的col属性，就是能了统一修改div列
接下来，就要动手修饰了。
为三列设置不同的背景色，听说现在很流行绿色
那咱们就选绿色的主调调吧~#9F9、#6F6、#3F3
设置左、右宽度固定，中间%。
#left{
background:#9F9;
width:px;
}
#main{
background:#6F6;
width:%;
}
#right{
background:#3F3;
width:px;
}
.col{
float:left;
height:px;
}
效果图：
此处不要握草，一切都在控制当中！
relax~~
添加浮动效果后，文档流排序是酱紫滴：
body中第一个是main，所以排在了第一行，宽度随意。
然后由于left、right设置了宽度px，所以在文档流中就被挤到下一行了。
先修改下左侧列的位置。
为left设置了左侧外边距为-%，就是让他的宽度会变成最长的。
原本第一行没有空余位置，都被main占据着，left、right都被挤到第二行。
而向左缩进-%宽度后，left列正好到了布局的最左侧。
#left{
margin-left:-%;
}
效果图：
嗯，不错，接下来调整right。
同理让right的右外边距为宽度px，向右就是-px。
那么right列就可以进入文档流。
#right{
margin-right:-px;
效果图：
看到了吗，right跑到了右侧，有一部分还是遮盖住了。
还需要为左和右创建更加合适的空间。
这次就通过div-page，来为左右内边距padding留出空间。
#page{
padding-left:px;
padding-right:px;
}
效果图：
现在分别为page左右各留出了px像素。
由图可知，由于右内边距的设置，mai被向左推移了px。
刚好留下了足够的右侧空间，使得right正常无遮盖的回到了窗口。
又由于左内边距，left和main列都被向右推开，以至于整个布局在左侧出现了px的空白。
老规矩，只需要让left左移px即可。
由于margin-left属性已经被设置为了-%，所以就没法左移了。
那咋办呢？
还可以设置left列为相对定位，再设置right属性为实现水平位移。
使得left列距离其右侧px，即向左偏移px
#left{
position:relative;
right:px;
}
效果图：
这次中间的牡丹就出来了吧～
因为之前设置太窄了，所以把参数修改为，然后设置居中。
#left{
background:#9F9;
width:px;
margin-left:-%;
position:relative;
right:px;
}
#main{
background:#6F6;
width:%;
}
#right{
background:#3F3;
width:px;
margin-right:-px;
}
.col{
float:left;
height:px;
}
#page{
padding-left:px;
padding-right:px;
效果图：
握草。。。居然忘记修改样式了
.col{
float:left;
height:px;
color:#FF44AA;
font-family:"STFangsong";
}
#pagep{
font-size:20px;
margin-top:px;
}
.colimg{
float:left;
}
效果图：
随意拖拽，左右固定，中间自适应：
搞定收工！
强烈建议订阅专辑：
HTML5-庖丁解牛
戳原文，更有料！预览时标签不可点收录于合集#个上一篇下一篇