水平方向两列三列自适应布局、垂直三列布局

<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>

演示在这里：http://jsfiddle.net/5vbtus2o/