zoukankan      html  css  js  c++  java
  • 水平方向两列三列自适应布局、垂直三列布局

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

  • 相关阅读:
    页码数求0到9共有多少个
    reduce
    map,filter
    匿名函数 lambda
    递归
    python 切片
    函数
    集合(set)
    python 中random 库的使用
    printf 输出?
  • 原文地址:https://www.cnblogs.com/wuyahuang/p/4512842.html
Copyright © 2011-2022 走看看