fieldset-columns-001-ref.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <style>
  5. a {
  6. position: absolute;
  7. width: 10px;
  8. height: 10px;
  9. top: 0;
  10. left: 0;
  11. background: blue;
  12. }
  13. f {
  14. position: fixed;
  15. width: 10px;
  16. height: 10px;
  17. bottom: 0;
  18. left: 100px;
  19. background: lime;
  20. }
  21. fieldset div {
  22. -moz-columns: 2;
  23. -moz-column-fill: auto;
  24. }
  25. fieldset {
  26. border: 1px solid;
  27. }
  28. .rel {
  29. position: relative;
  30. }
  31. </style>
  32. <fieldset style="overflow:hidden; width:300px; height:200px;">
  33. <legend>Legend</legend>
  34. <div class="rel" style="-moz-columns: 2; width:100%; height:100%;">
  35. <p>X
  36. <p>X
  37. <p>X
  38. <p>X
  39. <p>X
  40. <p>X
  41. <p>X
  42. <p>X
  43. <p>X
  44. <p>X
  45. <p>X
  46. <p>X
  47. <p>X
  48. <p>X
  49. <p>X
  50. <p>X
  51. <a></a><f></f>
  52. </div>
  53. </fieldset>
  54. <fieldset style="width:600px; height:7em; overflow:hidden">
  55. <legend>Legend</legend>
  56. <div class="rel" style="-moz-columns: 3; -moz-column-gap:2em; -moz-column-rule:3px solid; -moz-column-width:3em; width:100%; height:100%">
  57. <p>X
  58. <p>X
  59. <p>X
  60. <p>X
  61. <p>X
  62. <p>X
  63. <a></a><f style="left:120px"></f>
  64. </div>
  65. </fieldset>
  66. <fieldset style="overflow:hidden; width:300px; height:2em;">
  67. <legend>Legend</legend>
  68. <div>
  69. <p>X
  70. <a></a><f style="left:140px"></f>
  71. </div>
  72. </fieldset>
  73. <fieldset style="width:600px; height:2em">
  74. <legend>Legend</legend>
  75. <div>
  76. <p>X
  77. <a></a><f style="left:160px"></f>
  78. </div>
  79. </fieldset>
  80. </body>
  81. </html>