max-width-1.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div:empty { background: yellow; border: 1px solid black; height: 10px;
  6. padding: 0; margin: 0; }
  7. body > div:not(:empty) { width: 400px; }
  8. </style>
  9. </head>
  10. <body>
  11. <div style="width: 100px; max-width: 150px;"></div>
  12. <div style="width: 100px; max-width: 50px;"></div>
  13. <div style="width: 100px; max-width: 50px; min-width: 20px"></div>
  14. <div style="width: 100px; max-width: 50px; min-width: 150px"></div>
  15. <div style="max-width: 50px; min-width: 150px"></div>
  16. <div>
  17. <div style="width: 50%;"></div>
  18. </div>
  19. <div>
  20. <div style="width: 50%; max-width: 300px;"></div>
  21. </div>
  22. <div>
  23. <div style="width: 50%; max-width: 100px;"></div>
  24. </div>
  25. <div>
  26. <div style="width: 50%; max-width: 75%;"></div>
  27. </div>
  28. <div>
  29. <div style="width: 50%; max-width: 10%;"></div>
  30. </div>
  31. <div style="padding: 0 100px;">
  32. <div style="width: 50%; max-width: 75%;"></div>
  33. </div>
  34. <div style="padding: 0 100px;">
  35. <div style="width: 50%; max-width: 10%;"></div>
  36. </div>
  37. <div style="border-width: 0 100px; border-style: solid;
  38. border-color: transparent;">
  39. <div style="width: 50%; max-width: 75%;"></div>
  40. </div>
  41. <div style="border-width: 0 100px; border-style: solid;
  42. border-color: transparent;">
  43. <div style="width: 50%; max-width: 10%;"></div>
  44. </div>
  45. </body>
  46. </html>