<html> <!--三列水平居中--> <div style="float:right;background-color:blue;width:100px;height:100px;"></div> <div style="float:left;background-color:lightgray;width:100px;height:100px;"></div> <div style="background-color:red;height:100px;margin-left:100px;margin-left:100px;"></div> </br> <!--两列，右浮动--> <div style="float:right;width:100px;height:100px;background-color:blue"></div> <div style="background-color:red;height:100px;margin-right:100px;"></div> </br> <!--两列，左浮动--> <div style="float:left;width: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="width:100%;height:100px;position:absolute;background-color:blue;"></div> <div style="width:100%;height:100px;position:absolute;bottom:0;background-color:green;"></div> <div style="width:100%;position:absolute;top:100px;bottom:100px;background-color:red;"></div> </body> </html>
演示在这里：http://jsfiddle.net/5vbtus2o/
原文：http://www.cnblogs.com/wuyahuang/p/4512842.html