columnfill-auto.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="ahem.css" />
  4. <style>
  5. html,body {
  6. color:black; background-color:white; font-size:16px; padding:5px; margin:0;
  7. }
  8. mask {
  9. position: absolute;
  10. top:0; bottom:0; left:8px; width:5px;
  11. background: black;
  12. }
  13. .rel {
  14. position: relative;
  15. }
  16. .columns {
  17. -moz-column-width: 12em;
  18. -moz-column-gap: 0;
  19. -moz-column-fill: auto;
  20. height: 8em;
  21. font-family: ahem;
  22. font-size: 12pt;
  23. line-height: 1.1;
  24. }
  25. a {
  26. position: absolute;
  27. width: 10px;
  28. height: 10px;
  29. bottom: 0;
  30. left: 0;
  31. background: blue;
  32. }
  33. f {
  34. position: fixed;
  35. width: 10px;
  36. height: 10px;
  37. bottom: 0;
  38. left: 100px;
  39. background: lime;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div class="columns rel">
  45. <a></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
  46. </div>
  47. <div class="columns rel" style="overflow: hidden">
  48. <a></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
  49. </div>
  50. <div class="columns rel" style="overflow: hidden">
  51. <f></f>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
  52. </div>
  53. <div class="columns" style="overflow: hidden">
  54. <a></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
  55. </div>
  56. <div class="columns" style="overflow: hidden">
  57. <f style="left:120px"></f>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
  58. </div>
  59. <mask></mask>
  60. </body>
  61. </html>