bfc-float-left-break-vertically.html 945 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. * {
  6. border: 1px solid black !important;
  7. margin: 0;
  8. padding: 0;
  9. }
  10. body {
  11. width: 400px;
  12. }
  13. .yellow {
  14. width: 60px;
  15. height: 50px;
  16. float: left;
  17. background: yellow;
  18. }
  19. .orange {
  20. width: 250px;
  21. height: 50px;
  22. float: left;
  23. background: orange;
  24. }
  25. .green {
  26. background: lime;
  27. width: 100px;
  28. height: 50px;
  29. float: left;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="ul">
  35. <div class="yellow"></div>
  36. <div class="orange"></div>
  37. </div>
  38. <div class="green"></div>
  39. </body>
  40. </html>