zoukankan      html  css  js  c++  java
  • ☀【布局】多栏布局 / 盒布局

    深入了解 Flexbox 伸缩盒模型
    http://c7sky.com/dive-into-flexbox.html
    弹性方框模型 (Flexible Box Model) 快速入门
    http://www.html5rocks.com/zh/tutorials/flexbox/quick/

    多栏布局

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 600px;
    
                -moz-column-count: 3;
                -moz-column-gap: 28px;
                -moz-column-rule: 2px dotted #CCC;
                -webkit-column-count: 3;
                -webkit-column-gap: 28px;
                -webkit-column-rule: 2px dotted #CCC;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>咳咳咳,曲颈向天歌,浓痰浮白水,久病化沉疴。一咳咳落日共月,再咳咳逆江与河。咳遍楚营霸王乱,虞兮虞兮奈若何;咳得后主辞庙去,无心垂泪对宫娥。汉皇重咳思倾国,御宇多年求不得。子美夜问有封事,哪堪因风想玉咳。人生百年终有死,咳咳咳咳咳咳咳</div>
            <div>咳咳咳,曲颈向天歌,浓痰浮白水,久病化沉疴。一咳咳落日共月,再咳咳逆江与河。咳遍楚营霸王乱,虞兮虞兮奈若何;咳得后主辞庙去,无心垂泪对宫娥。汉皇重咳思倾国,御宇多年求不得。子美夜问有封事,哪堪因风想玉咳。人生百年终有死,咳咳咳咳咳咳咳</div>
        </div>
    </body>
    </html>

    盒布局

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                display: -moz-box;
                display: -webkit-box;
            }
            .box .item {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }
            .box .item1 {
                -moz-box-flex: 2; /* 弹性盒布局 */
                -webkit-box-flex: 2;
                -moz-box-ordinal-group: 3; /* 显示顺序 */
                -webkit-box-ordinal-group: 3;
            }
            .box .item2 {
                -moz-box-flex: 1;
                -webkit-box-flex: 1;
                -moz-box-ordinal-group: 1;
                -webkit-box-ordinal-group: 1;
            }
            .box .item3 {
                width: 200px;
                -moz-box-ordinal-group: 2;
                -webkit-box-ordinal-group: 2;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item item1">咳咳咳,曲颈向天歌,浓痰浮白水,久病化沉疴。一咳咳落日共月,再咳咳逆江与河。咳遍楚营霸王乱,虞兮虞兮奈若何;咳得后主辞庙去,无心垂泪对宫娥。汉皇重咳思倾国,御宇多年求不得。子美夜问有封事,哪堪因风想玉咳。人生百年终有死,咳咳咳咳咳咳咳</div>
            <div class="item item2">咳咳咳,曲颈向天歌,浓痰浮白水,久病化沉疴。一咳咳落日共月,再咳咳逆江与河。咳遍楚营霸王乱,虞兮虞兮奈若何;咳得后主辞庙去,无心垂泪对宫娥。汉皇重咳思倾国,御宇多年求不得。子美夜问有封事,哪堪因风想玉咳。人生百年终有死,咳咳咳咳咳咳咳</div>
            <div class="item item3">咳咳咳,曲颈向天歌,浓痰浮白水,久病化沉疴。一咳咳落日共月,再咳咳逆江与河。咳遍楚营霸王乱,虞兮虞兮奈若何;咳得后主辞庙去,无心垂泪对宫娥。汉皇重咳思倾国,御宇多年求不得。子美夜问有封事,哪堪因风想玉咳。人生百年终有死,咳咳咳咳咳咳咳</div>
        </div>
    </body>
    </html>

    指定水平方向与垂直方向的对齐方式

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 200px;
                height: 200px;
                background: #DDD;
                display: -moz-box;
                display: -webkit-box;
                -moz-box-align: center;
                -webkit-box-align: center;
                -moz-box-pack: center;
                -webkit-box-pack: center;
            }
            .box div {
                width: 100px;
                height: 100px;
                background: #F00;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div></div>
        </div>
    </body>
    </html>

    盒布局与多栏布局的区别在于:使用多栏布局时,各栏宽度必须是相等的,在指定每栏宽度时,也只能为所有栏指定一个统一的宽度,栏与栏之间的宽度不可能是不一样的。另外,使用多栏布局时,也不可能具体指定什么栏中显示什么内容,因此比较适合在显示文章内容的时候,不适合用于安排整个网页中由各元素组成的网页结构时

  • 相关阅读:
    服务器迁移总结
    使用OpenSSL生成证书
    mysql Event、存储过程、表命令
    负载均衡 > 常见问题
    SpringMVC记住密码功能
    spring mvc +cookie+拦截器功能 实现系统自动登陆
    android studio之argument for @notnull parameter 'name'
    jQuery ajax表单提交实现局部刷新
    Spring MVC 中采用注解方式 Action中跳转到另一个Action的写法
    ajax表单提交全路径
  • 原文地址:https://www.cnblogs.com/jzm17173/p/3416228.html
Copyright © 2011-2022 走看看