cpp
/
RmlUi
镜像来自 https://github.com/mikke89/RmlUi.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
							<rml>
<head>
  <link type="text/rcss" href="/../Tests/Data/style.rcss" />
  <title>CSS Test: flex container multiline wrapping in column-reverse direction</title>
  <link href="https://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/xhtml1/multi-line-wrap-with-column-reverse.xht" rel="source" />
  <link href="mailto:[email protected]" rel="author" title="tmtysk" />
  <link href="mailto:[email protected]" rel="reviewer" title="Tab Atkins" />
  <link href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property" rel="help" />
  <link href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" rel="help" />
  <link href="reference/flex_wrap_column_reverse-ref.rml" rel="match" />
  <meta content="This test check that a flex container wraps blocks multiline in column-reverse direction." name="assert" />
  <style>
    *, p { margin:0; padding:0; font-size:100%; line-height:1; }

    #test {
      display: flex;
      flex-direction: column-reverse;
      flex-wrap: wrap;
      height: 300dp;
    }

    p {
      margin-top: 10dp;
      margin-right: 10dp;
      background-color: #eee;
    }

    #col1-row1 {
        height: 90dp;
    }

    #col1-row2 {
        height: 90dp;
    }

    #col1-row3 {
        height: 90dp;
    }

    #col2-row1 {
        height: 140dp;
    }

    #col2-row2 {
        height: 140dp;
    }

    #col3-row1 {
        height: 290dp;
    }
  </style>
</head>
<body>
  <div id="test">
    <p id="col1-row3">1-3</p>
    <p id="col1-row2">1-2</p>
    <p id="col1-row1">1-1</p>
    <p id="col2-row2">2-2</p>
    <p id="col2-row1">2-1</p>
    <p id="col3-row1">3-1</p>
  </div>
</body>
</rml>