TestFlow_FloatMulti.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839
  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>
  31. <div style="width: 100px">Div1-1</div>
  32. <span>Span1</span><span style="float: right"><span>Span2</span></span><span style="float: right">Span3</span><span>Span4</span>
  33. <div style="float: left">Div1-2 A B C</div>
  34. <div style="float: left">Div1-3 D E F G H I J K</div>
  35. </div>
  36. </div></body>
  37. </html>