inline_formatting_07.rml 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <rml>
  2. <head>
  3. <title>Inline formatting 07</title>
  4. <link type="text/rcss" href="../style.rcss"/>
  5. <link rel="help" href="https://drafts.csswg.org/css2/#floats" />
  6. <meta name="Description" content="Floats placed within line boxes." />
  7. <style>
  8. hr { clear: both; margin: 0.5em 0; }
  9. div { border: 2px #666; }
  10. .right { float: right; }
  11. .left { float: left; }
  12. .clear { clear: both; }
  13. .lines { line-height: 50px; background: #cca; }
  14. .big { width: 300px; height: 190px; background: #ada; }
  15. .small { width: 30px; height: 15px; background: #eaa; line-height: 15px; }
  16. .tall { width: 30px; height: 100px; background: #aae; }
  17. .inline { display: inline-block; overflow: hidden; }
  18. </style>
  19. </head>
  20. <body>
  21. <div class="big right"> Big </div>
  22. <div class="lines">
  23. First line<br/>
  24. Second line ABC DEF
  25. <div class="small right">X</div><div class="small right">Y</div>
  26. GHI JKL MNO PQRS TUV
  27. </div>
  28. <hr/>
  29. <div class="big right"> Big </div>
  30. <div class="lines">
  31. First line<br/>
  32. Second line
  33. <div class="small left">X</div><div class="small left" style="clear:left;">Y</div><div class="small right">Z</div>
  34. ABC DEF GHI JKL MNO PQRS TUV
  35. </div>
  36. <hr/>
  37. <div class="big right" style="height: 140px"> Big </div>
  38. <div class="lines">
  39. First line<br/>
  40. Second line ABC DEF GHI JKL MNO PQRS TUV<div class="small right">X</div><div class="small right">Y</div><div class="small left">Z</div>
  41. ABC DEF GHI JKL MNO PQRS TUV ABC DEF GHI JKL MNO PQRS TUV ABC DEF GHI JKL MNO PQRS TUV <div class="inline tall">Z</div>
  42. </div>
  43. <handle size_target="#document"/>
  44. </body>
  45. </rml>