min-width-1.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  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; min-width: 50px;"></div>
  12. <div style="width: 100px; min-width: 150px;"></div>
  13. <div>
  14. <div style="width: 50%;"></div>
  15. </div>
  16. <div>
  17. <div style="width: 50%; min-width: 100px;"></div>
  18. </div>
  19. <div>
  20. <div style="width: 50%; min-width: 300px;"></div>
  21. </div>
  22. <div>
  23. <div style="width: 50%; min-width: 10%;"></div>
  24. </div>
  25. <div>
  26. <div style="width: 50%; min-width: 75%;"></div>
  27. </div>
  28. <div style="padding: 0 100px;">
  29. <div style="width: 50%; min-width: 10%;"></div>
  30. </div>
  31. <div style="padding: 0 100px;">
  32. <div style="width: 50%; min-width: 75%;"></div>
  33. </div>
  34. <div style="border-width: 0 100px; border-style: solid;
  35. border-color: transparent;">
  36. <div style="width: 50%; min-width: 10%;"></div>
  37. </div>
  38. <div style="border-width: 0 100px; border-style: solid;
  39. border-color: transparent;">
  40. <div style="width: 50%; min-width: 75%;"></div>
  41. </div>
  42. </body>
  43. </html>