flex_wrap_column_reverse-ref.rml 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <rml>
  2. <head>
  3. <link type="text/rcss" href="/../Tests/Data/style.rcss" />
  4. <title>CSS Test Reference: flex container multiline wrapping in column-reverse direction</title>
  5. <link href="mailto:[email protected]" rel="author" title="tmtysk" />
  6. <link href="mailto:[email protected]" rel="reviewer" title="Tab Atkins" />
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. font-size: 100%;
  12. line-height: 1;
  13. }
  14. .test {
  15. width: 300px;
  16. float: left;
  17. width: 33.3333%;
  18. }
  19. p {
  20. margin-top: 10px;
  21. margin-right: 10px;
  22. background-color: #eee;
  23. }
  24. #row1-col1 {
  25. height: 90px;
  26. }
  27. #row1-col2 {
  28. height: 90px;
  29. }
  30. #row1-col3 {
  31. height: 90px;
  32. }
  33. #row2-col1 {
  34. height: 140px;
  35. }
  36. #row2-col2 {
  37. height: 140px;
  38. }
  39. #row3-col1 {
  40. height: 290px;
  41. }
  42. .clear {
  43. clear: both;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <div class="test">
  49. <p id="row1-col1">1-1</p>
  50. <p id="row1-col2">1-2</p>
  51. <p id="row1-col3">1-3</p>
  52. </div>
  53. <div class="test">
  54. <p id="row2-col1">2-1</p>
  55. <p id="row2-col2">2-2</p>
  56. </div>
  57. <div class="test">
  58. <p id="row3-col1">3-1</p>
  59. </div>
  60. <div class="clear"></div>
  61. </body>
  62. </rml>