• -ms-grid -ms-grid-rows -ms-grid-row -ms-grid-columns -ms-grid-column


    style: display:-ms-grid
    -ms-grid-columns和-ms-grid-rows的值可以为:
    》标准长度单位,如像素
    》对象宽度(对于列)或高度(对于行)的百分比
    》auto 关键字,表示行宽和行高基于其中的项调整
    》min=content关键字,表示将任何子元素的最小宽度或高度用作宽度或高度
    》max-content关键字,表示将任何子元素的最大宽度或高度用作宽度或高度
    》minmax(a, b)关键字,表示宽度或高度介于a和b之间(只要可用空间允许)
    》分数单位fr,表示可用空间应根据其分数值在列或行之间分配
    例子:-ms-grid-columns:auto 100px 1fr 2fr;-ms-grid-rows:50px auto;

    <div style="border: 1px solid gray;  800px; display: -ms-grid; -ms-grid-columns: auto 100px 1fr 2fr; -ms-grid-rows: 50px auto;">
    <p style="margin: 2px; border: 1px solid gray;">Chind Element 1</p>
    <p style="margin: 2px; border: 1px solid gray;">Chind Element 2</p>
    <p style="margin: 2px; border: 1px solid gray;">Chind Element 3</p>
    <p style="margin: 2px; border: 1px solid gray;">Chind Element 4</p>
    <p style="margin: 2px; border: 1px solid gray;">Chind Element 5</p>
    </div>

    此网格有四列,且每一列按照下述方式显示
    》列 1(auto 关键字):列适合于列中的内容。
    》列 2 ("100px"):列的宽度为 100 像素。
    》列 3 ("1fr":列占据剩余空间的一个分数单位。
    》列 4 ("2fr":列占据剩余空间的两个分数单位。

    由于此网格中总共有三个分数单位,所以列 3 被分配了剩余空间的 1/3—即 3 个分数单位—中的 1 个分数单位。列 4 则被分配了剩余空间的 2/3。

    同样,此网格有两行,且每一行将按照下述方式显示:
    》行 1 ("50px"):行的高度为 50 像素。
    》行 2(auto 关键字):行适合于行中的内容。

    若要对网格中的子项目进行定位,请使用 -ms-grid-column 和 -ms-grid-row 属性指定每个项目所在的列和行。

                <div style="border: 1px solid gray;  800px; display: -ms-grid; -ms-grid-columns: auto 100px 1fr 2fr; -ms-grid-rows: 50px auto">
                    <p style="margin: 2px; border: 1px solid gray; -ms-grid-column: 1; -ms-grid-row: 1">
                        Child element 1
                    </p>
                    <p style="margin: 2px; border: 1px solid gray; -ms-grid-column: 2; -ms-grid-row: 1">
                        Child element 2
                    </p>
                    <p style="margin: 2px; border: 1px solid gray; -ms-grid-column: 3; -ms-grid-row: 1">
                        Child element 3
                    </p>
                    <p style="margin: 2px; border: 1px solid gray; -ms-grid-column: 4; -ms-grid-row: 1">
                        Child element 4
                    </p>
                    <p style="margin: 2px; border: 1px solid gray; -ms-grid-column: 1; -ms-grid-row: 2">
                        Child element 5
                    </p>
                </div>

    http://msdn.microsoft.com/zh-CN/library/windows/apps/jj841108.aspx

  • 相关阅读:
    python实现的列表操作
    python的静态方法
    python标准库学习2
    javascript继承原型继承的例子
    jQuery高亮显示文本中重要的关键字
    表格展开伸缩
    jQuery设计思想
    python标准库学习3
    python中的继承和抽象类的实现
    表格的变色问题
  • 原文地址:https://www.cnblogs.com/grj1046/p/3208074.html
Copyright © 2020-2023  润新知