简单常用的CSS+DIV布局(2)
上一篇讲了《简单常用的CSS+DIV布局(1) 》，主要以1-2-1布局为例切入学习div+css制作页面的一个优点。这篇在上篇的基础上做一个延伸——1-3-1布局，也就是常见的3栏布局结构。
先看个Demo的例子：
提示：你可以先修改部分代码再运行。
页头，页脚分别使用的是自动适应屏幕的宽度；内容部分使用百分比（其实定宽后，100%几乎与px一个效果）。
需要注意的一点，我再div.warp里面多添加了一个div.main，而div.main的属性为：
.main{
float:left;
text-align:left;
width:100%;
}
如上设置之后，可以避免float属性后引发的haslayout问题。回避了问题，相应的减少css中的hack书写。
下面的例子是一个2栏3栏混排的模式：
提示：你可以先修改部分代码再运行。
P.S.:在div+css布局中，尽量减少hack才能使得页面平滑过渡。
当拿到设计完成的页面后，先不要急着还原页面，先审视下整个项目所设计的页面结构，在大的结构上先了解清楚。
- 页头页尾是否可以共用
- 页面设计几栏（2栏？3栏）
大的结构定下之后，就可以对页面进行对应的切割，还原。从而“胸有成竹”！