percent-width-child-1-ref.html 871 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <!DOCTYPE html>
  2. <!--
  3. Any copyright is dedicated to the Public Domain.
  4. http://creativecommons.org/publicdomain/zero/1.0/
  5. -->
  6. <html>
  7. <head>
  8. <style>
  9. div.button {
  10. display: inline-block;
  11. border: 0;
  12. padding: 0;
  13. font: 10px sans-serif;
  14. text-align: center;
  15. vertical-align: top;
  16. color: black;
  17. background: gray;
  18. }
  19. div.p80 {
  20. width: 80%;
  21. background: pink;
  22. }
  23. div.p100 {
  24. width: 100%;
  25. background: yellow;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <!--Button has explicit width for us to resolve against: -->
  31. <div class="button" style="width: 100px">
  32. <div class="p80">abc</div>
  33. </div>
  34. <div class="button" style="width: 100px">
  35. <div class="p100">abc</div>
  36. </div>
  37. <!--Button is using intrinsic width: -->
  38. <div class="button">
  39. <div class="p80">abc</div>
  40. </div>
  41. <div class="button">
  42. <div class="p100">abc</div>
  43. </div>
  44. </body>
  45. </html>