TestFlow_FloatBelowNextSibling.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5. <title>Project1</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <style>
  8. div {
  9. padding: 5px;
  10. border: 2px solid blue;
  11. margin: 4px;
  12. }
  13. span {
  14. padding: 5px;
  15. border: 2px solid red;
  16. margin: 4px;
  17. }
  18. </style
  19. </head>
  20. <body>
  21. <script>
  22. function Show(){
  23. var El = document.getElementById('wing');
  24. console.log('Client: l='+El.clientLeft+' t='+El.clientTop+' w='+El.clientWidth+' h='+El.clientHeight+' Scroll: Left='+El.scrollLeft+' Width='+El.scrollWidth+' Top='+El.scrollTop+' Height='+El.scrollHeight);
  25. }
  26. window.addEventListener("load", (event) => {
  27. var El = document.getElementById('feather');
  28. });
  29. </script>
  30. <div style="width: 190px;">
  31. <span style="padding-right: 30px;">Inline1</span><span style="float: right; width: 70px; height: 80px;">FloatR2</span>
  32. <span style="float: right; height: 10px;">FloatR3</span>
  33. <span>Inline4</span>
  34. <span>Inline5</span>
  35. </div>
  36. FloatR3 would fit behind Inline1 (hide FloatR2 to see)<br>
  37. Rule: new floats are at never above older floats
  38. <div style="width: 130px;">
  39. <span>Inline6</span><span style="float: right">FloatR7</span><span style="font-size: 30px;">Inline8</span>
  40. </div>
  41. Floats that don't fit on the current line are added after EOL.
  42. </div></body>
  43. </html>