<html> <!--三列水平居中--> <div style="float:right;background-color:blue;100px;height:100px;"></div> <div style="float:left;background-color:lightgray;100px;height:100px;"></div> <div style="background-color:red;height:100px;margin-left:100px;margin-left:100px;"></div> </br> <!--两列，右浮动--> <div style="float:right;100px;height:100px;background-color:blue"></div> <div style="background-color:red;height:100px;margin-right:100px;"></div> </br> <!--两列，左浮动--> <div style="float:left;100px;height:100px;background-color:blue;"></div> <div style="background-color:red;height:100px;margin-left:100px;"></div> </html>
演示在这里：http://jsfiddle.net/3s6e2qmr/
<html> <!--垂直方向三列布局--> <body> <div style="100%;height:100px;position:absolute;background-color:blue;"></div> <div style="100%;height:100px;position:absolute;bottom:0;background-color:green;"></div> <div style="100%;position:absolute;top:100px;bottom:100px;background-color:red;"></div> </body> </html>