常见的页面布局方式

如果演示框没有加载出来，可以尝试访问voezy’s public fiddles

圣杯布局

要点：左右侧板块定宽，中间自适应，填满中部空间
注意：宽度缩小到一定程度时(中间板块比两侧板块的宽度要小)，布局将会出现问题。容器应该设置一个合适的最小宽度。

因为在HTML中，各板块的结构顺序是中间板块、左板块和右板块，所以，左板块margin-left要设置为 -100%。右板块只需设置margin-left为自身宽度的负数即可。

为了使中间板块不被两侧板块遮挡，容器要设置左右padding。左右padding其实是留给两侧板块的 “显示空间”，而中间板块只占了容器宽度中除了paddinig以外的内容宽度。

为了使两侧板块定位到容器的左右padding部分的位置上，要将左右板块改为相对定位，并且调整他们的left或right为他们的宽度(也就是容器padding的宽度)。

全部代码及结果。

要点：与圣杯布局类似，实现方法略有不同
注意：当总宽度小于左右两侧板块宽度时，布局会出现问题，所以也要给外层容器设置一个最小宽度

不同点在于改变了中间板块的结构，中间板块作为一个容器，将内容放到了其下的一个子元素。中间板块的子元素再设置左右margin为两侧板块相应宽度。这样左右两侧板块就不再需要相对定位及调整左右定位的距离。

以上只是大体的结构，具体应用还要根据具体情况做调整。