Blogger Information
Blog 31
fans 2
comment 0
visits 27666
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
浮动元素的高度塌陷与解决方案 overflow
霏梦
Original
529 people have browsed it

- 作者:霏梦

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>浮动元素的高度塌陷与解决方案</title>
  7. <style>
  8. .container {
  9. border: 3px solid red;
  10. }
  11. .item {
  12. width: 150px;
  13. height: 150px;
  14. float: left;
  15. }
  16. .item:first-of-type {
  17. background-color: lightgreen;
  18. }
  19. .item:nth-last-of-type(2) {
  20. background-color: lightsalmon;
  21. }
  22. .item:last-of-type {
  23. background-color: magenta;
  24. }
  25. .container {
  26. overflow: auto;
  27. overflow: hidden;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div class="container">
  33. <div class="item"></div>
  34. <div class="item"></div>
  35. <div class="item"></div>
  36. </div>
  37. </body>
  38. </html>
Correcting teacher:WJWJ

Correction status:qualified

Teacher's comments:写的不错,下次一天的写在一起,另外建议重点代码加上效果图!
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post