zoukankan      html  css  js  c++  java
  • -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

  • 相关阅读:
    Apache Cassandra 4.0新特性介绍
    NoSQLBench压测工具入门教程
    赵洋:深入了解Materialized View
    PHP与ECMAScript_1_变量与常量
    HTTP_5_通信数据转发程序:代理、网关、隧道
    HTTP_4_返回结果的HTTP状态码
    HTTP_3_HTTP报文
    HTTP_2_HTTP协议概要
    HTTP_1_Web及网络基础
    一个完整的产品设计流程——家庭安全管家
  • 原文地址:https://www.cnblogs.com/grj1046/p/3208074.html
Copyright © 2011-2022 走看看